表单校验（永远不要相信用户传过来的数据）

表单校验

表单的校验大致可以分为如下三步：

 1. 定义验证规则
 
 2. 配置模板，应用规则
	给表单设置 rules 属性传入验证规则
	给表单设置model属性传入表单数据
	给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
	
 3. 手动兜底验证

1，定义验证规则

在data中 定义校验规则
格式为

    rules：{
	   字段名1: [
          { 验证规则1 },
          { 验证规则2 },
          ...
        ],
        ...
}

示例代码：

  rules: {
        name: [
          { required: true, message: '必填项', trigger: 'blur' },
          { min: 1, max: 6, message: '请输入1-6个字符', trigger: 'blur' },
          { validator: validatorName, trigger: 'blur' }
        ],
        number:[{
          //可以自己写正则
            message: "请输入数字",
            pattern: /^([1-9]\d*|0)(\.\d{1,5})?$/,
          },]
        password: [
          { required: true, message: '必填项', trigger: 'blur' },
        
       
          { min: 1, max: 8, message: '请输入1-8个字符', trigger: 'blur' },
          { validator: validatorId, trigger: 'blur' }
        ],

以下是一些默认的校验规则

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true                 必须输入合法的数字(负数，小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10

这样就定义了两个基本的校验规则（其中validator为自定义校验 自定义规则可以让校验逻辑更加灵活 博客底部有语法）

接下来我们把他配置到模板上

2，配置模板，应用规则

注意：这三处必须保持一致

<el-form :rules="rules" :model="form" >
   <el-form-item label="姓名" prop="name">
   		<el-input />
   </el-form-item>
   <el-form-item label="密码" prop="password">
   		<el-input />
   </el-form-item>
</el-form>
   

做完这一步我们输入框失去焦点就会触发表单校验规则了
未输入内容：

格式错误：

但是我们如果不触发失去焦点事件 还是可以提交 所以还需要手动兜底校验

3，兜底校验

表单的兜底校验也叫二次校验 一般用在用户提交或保存的时候定义在提交按钮的点击事件上， 点击提交再次校验输入框里的内容 校验不通过不允许提交

 <el-form ref="roleForm" :rules="rules">// 

 <el-button @click="hSubmit">确定</el-button>

 hSubmit() {
      // 手动兜底校验
      this.$refs.roleForm.validate((valid, value, callback) => {
        if (valid) { // valid是一个布尔值通过为true错误为false
          // 验证通过
          alert('提交成功')
        } else {
          // 验证不通过
          callback(new Error(value + '格式不正确'))
          return false
        }
      })

这样我们点击提交 就会触发手动兜底校验了

自定义校验规则（写在data下）

 data() {
let themeName = (rule, value, callback) => {
      const r = /^[a-z0-9]+$/i;
      if (value == "" || value == null) {
        callback();
      } else if (!r.test(value)) {
        callback(new Error("请输入英文和数字"));
      } else {
        callback();
      }
    };
    
    return {
     themeTwo: [
          { validator: themeName, trigger: "blur" },
          ]
          ...
          }