热词推荐:
当前位置:首页 > 技术文章 > VUE >

element ui rules校验记录,方便后续使用

作者:欧欧 来源:风者信息科技 发布时间:2022-09-23

rules: {
//空验证
string: [
    {type: 'string',required: true, message: "源库名称不能为空", trigger: "blur"}
],
//数字验证
number: [
    {type: 'number',required: true, message: "所属组织名称不能为空", trigger: "blur"}
],
//整数校验
integer: [
    {type: 'integer', message: "请输入整数", trigger: 'blur'}
],
//小数校验
float: [
    {type: 'float', message: "请输入浮点数", trigger: 'blur'}
],
//在什么中校验
enum: [
    {type: 'enum', enum: ['aaa', 'bbb'], message: "不存在enum中", trigger: 'change'}
],
// url校验
url: [
    {type: 'url', message: "请输入正确的url", trigger: 'change'}
],
//email校验
email: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {type: 'email', message: "请输入正确的email", trigger: 'change'}
],
//正则校验
pattern: [
    {pattern: /^[0-9]*$/, message: `请输入数字`, trigger: 'blur'}
],
//最小长度与最大长度校验
minAndMax: [
    {min: 2, max: 9, message: '请输入2-9位', trigger: 'blur'}
],
// 指定确切长度校验
length: [
    {len: 5, message: '请输入5位', trigger: 'blur'}
],
//转换值校验
transform: [
    {type: 'enum', enum: [1,2,3], message: "结果不存在", trigger: ['change', 'blur'], transform(value) {return Number(value * 10)}}
]
//手机号验证
phone: [
    {required: true, message: "手机号不能为空", trigger: "blur"},
    {pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur'}
]
 
}

// 根据form.place的值决定type是不是要必填
<el-form-item label="类型" prop="type" 
:rules="form.place == 1 ? [{required: true, message: '类型不能为空', trigger: 'blur'}] : [{required: false, trigger: 'blur'}]" />

let myselfValidator = (rule, value, callback) => {
  if(String(value).length > 10) {
    callback('最长输入10位')
  } else {
    callback()
  }
}
 
// 校验
num: [
  {validator: myselfValidator, trigger: 'blur'}
]

电话:13599120724

邮箱:oo@fzer.net

地址:厦门市集美区杏林湾路496号裙楼D022

热词推荐

案例展示

产品项目

文章信息