elementUI表单验证 rules 常见规则

指定类型

指定为字符串类型

// 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ]
<el-form-item label="测试字段" prop="string">
<el-input v-model.number="form.string" placeholder="请输入"></el-input>
</el-form-item>

指定为数字类型

   number:[{
          type: 'number',message: '请输入数字',trigger: 'blur'
      }]
      <el-form-item label="测试字段" prop='string'>
          <el-input v-model.number = "form.string"></el-input>
      </el-form-item>

指定为整数

 integer:[{
          type: 'integer',message: '请输入证书',trigger: 'blur'
      }]

指定为存储在指定的lemon中

    lemon:[{
          type: 'lemon',lemon:['okk','nonono'],message: '不存在lemon中',trigger: 'blur'
      }]

输入限制为url

  url:[{
          type: 'url',message: ‘请输入正确的url',trigger: 'change'
      }]

小结

regexp 必须是RegExp创建新时不会产生异常的实例或者字符串 RegExp
date 类型也是date email hex同样
trigger ：change 数据改变 ：blur 失去焦点

有关属性

• required 为true 是必填字段

 name:[
      {required:true,message:'请输入你的名字',trigger='blur'}
      ]

• pattern 该pattern属性指示一个正则表达式的值必须匹配，才能通过验证。

 number:[
      {pattern:/^[0-9]*$/,message:'请输入你的手机号',trigger='blur'}
      ]

• max min 规定最大最小长度

  minmax:[
      {min:3,max:9,message:'请输入3-9位数字',trigger='blur'}
      ]

• whitespace 验证是否有空格

  witespace:[
      {witespace:true, message:'存在空格',trigger='blur'}
      ]

• validator

 let numberLengthSix = (rule,value,callback)=>{
        if(String(value).length>6){
            callback('超出限制')
        }else{
            callback()
        }
    }

自定义规则

以年龄为例 输入框要去输入年龄

//  注意 这里的model是绑定的表单下面的
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" 
label-width="100px" class="demo-ruleForm">

<el-form-item label="年龄" prop="age"> 
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>

校验

var checkAge = (rule, value, callback) => {
if (!value) { 
return callback(new Error('年龄不能为空')); 
} setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值')); 
} else { if (value < 18) {
callback(new Error('必须年满18岁')); 
} else { callback(); 
} } }, 1000); };

rule

ruleForm: { pass: '', checkPass: '', age: '' },
rules: { 
pass: [ { validator: validatePass, trigger: 'blur' } ], 
checkPass: [ { validator: validatePass2, trigger: 'blur' } ], 
age: [ { validator: checkAge, trigger: 'blur' } ] } };

提交验证

submitForm(formName) { 
this.$refs[formName].validate((valid) => { 
if (valid) {
alert('submit!'); 
} else { 
console.log('error submit!!');
return false; } }); },