element-ui的表单验证

一、对单个表单域进行校验
如下，对于单个表单域，可以直接对表单域的rules参数进行配置，来实现格式验证，这种方法一般比较适用于格式验证比较简单的情况。

如果需要进行验证的字段比较多，或者验证规则比较复杂，那么最好使用下方对整个表单校验的方式

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item 
    label="邮箱"
    prop="email"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          email: ''
        }
      };
    },
    ......
  }
</script>

二、对整个表单进行校验
在data中定义表单验证规则的对象数组rules（可以单独编写验证器函数），并直接绑定到表单标签的rules参数中。

其中，validator是单个表单域格式验证的验证器，一般是需要比较复杂的格式验证的时候才会用。

例如在下方的代码，确认密码使用的就是validator验证器，可校验两次密码是否一致。

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  ......
</el-form>
<script>
  export default {
    data() {
      ......
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请确认密码'));
        } else if(value === this.ruleForm.pass) {
          callback(new Error('密码输入不一致'));
        }else{
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '密码长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          checkPass:[
          	{ validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },
    ......
  }
</script>

三、提交校验

data(){
	return:{
		loginForm: {
        	username: 'admin',
        	password: '111111'
      	},
	}
},
methods:{
	confirm(){
		this.$refs.loginForm.validate(valid => {
		   if (valid) {
		     console.log('校验通过')
		   } else {
		     console.log('校验失败')
		     return false
		   }
		})
	}
}

四、表单验证规则rules可用字段
1、required
是否必填

rules: {
   email: [
     { required: true, message: '请输入邮箱地址', trigger: 'blur' }
   ]
 }

2、type
type可对数据格式进行检验，type的可选的类型值有

string: 字符串类型（默认值）
number: 数字类型
boolean:布尔类型
method: 函数类型
regexp:正则表达式
integer: 整型
float: 双精度浮点型数字
array: 数组类型
object: 对象类型
enum: 枚举值
date: 日期格式
url: 网址格式
hex: 16进制数字
email: 电子邮箱格式
any: 任意类型

例如验证邮箱格式：

rules: {
   email: [
     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
     {type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}
   ]
 }

3、pattern
使用正则表达式校验

rules: {
   email: [
      type : "string" , message: '校验失败', required: true , pattern : /^[a-z]+$/ }
   ]
 }

4、min/max
判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较

rules: {
   email: [
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
   ]
 }

5、len
长度验证，例如可以验证手机号位数

rules: {
   phoneNum: [
      {required: true, message: '请输入正确号码',len: 11, trigger: 'blur' }
   ]
 }

6、fields
深层验证规则，可以对array和object进行校验

rules: {
	//例如对省市区进行验证
	address:[
		{
			type: "object", required: true,
		    fields: {
		      province: {type: "string", required: true},
		      city: {type: "string", required: true},
		      area: {type: "string", required: true, len: 8, message: "invalid zip"}
		    }
		}
	],
	//也可对数组进行校验
	array:[
		{
			type: "array", required: true,
		    fields: {
		      0: {type: "string", required: true},
		      1: {type: "string", required: true},
		      2: {type: "string", required: true, len: 8, message: "invalid zip"}
		    }
		}
	]
 }