表单校验基本步骤:

1.  定义验证规则

2.  配置模板，应用规则

    (1)给表单设置 `rules` 属性传入验证规则

    (2)给表单设置`model`属性传入表单数据

    (3)给表单中的元素（Form-Item ）设置 `prop` 属性，其值为设置为需校验的字段名

3.  手动兜底验证

1.定义验证规则(在data中 定义校验规则,格式/示例如下:)

格式为:

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

示例代码:

data() {
  return {
    // 省略其他...
    rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur'},
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger:'blur'}
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur'},
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur'}
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur'}
        ]
    }
  }
}

2.将规则应用到模板中

主要是:
    1.  el-form上的ref, model, rules
    2.  el-form-item上的prop(给表单中的元素（Form-Item ）设置 `prop` 属性，其值为设置为需校验的字段名)

示例代码:

<el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择" />
      </el-form-item>
</el-form>

3.手动兜底验证

格式如下:

onSubmit() {
  // 表单验证
  this.$refs.form.validate(valid => {
    if (valid) {
    	//写验证通过的执行代码
    }
  })
}

4.自定义验证规则(在 rules中的某个属性校验中，补充一个validator)

格式如下:

rules:{
    属性名1: [
      { 
        validator: function (rule, value, callback) {
      	  // rule     : 当前的规则
          // value    : 被校验的值
          // callback : 回调 
          //      如果通过了规则检验，直接调用callback()
          //      如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)
          if(rules){
                  callback()
                }else{
                  callback(new Error('错误说明') )
                }
        	//      callback(new Error('错误说明'))
      	}, 
        trigger: 'blur'// 验证的时机
     }]
}

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

(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