在vue中element-ui对表单字段进行验证（rules）

1. 写在 data 中验证

表单内容

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名称:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form>：代表这是一个表单
<el-form> -> ref：表单被引用时的名称，标识
<el-form> -> rules：表单验证规则
<el-form> -> model：表单数据对象
<el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
<el-form> -> <el-form-item>：表单中的每一项子元素
<el-form-item> -> label：标签文本
<el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
<el-input>：输入框
<el-input> -> v-model：绑定的表单数据对象属性
<el-input> -> style：行内样式
<el-input> -> maxlength：最大字符长度限制
data 数据

data() {
    return {
        // 省略别的数据定义
        ...
        
        // 表单验证
        formRules: {
            userName: [
                {required: true,message: "请输入用户名称",trigger: "blur"}
            ]
        }
    }
}
//formRules：与上文  '表单内容' 中 <el-form> 表单的 :rules 属性值相同
//userName：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
//验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'

 

---

  2. 写在行内

表单内容

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

• <el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述

  ---

  3. 引入外部定义的规则

• 表单内容

• <!-- 表单 -->
  <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
      <el-form-item label="银行卡号:" prop="accountNumber">
         <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
      </el-form-item>
  </el-form>
  

     表单内容与第一种方式写法一致，这里不再赘述。
  script 内容：

  <script>
  // 引入了外部的验证规则
  import { validatetNumber } from "@/utils/validate";
   
  // 判断银行卡账户是否正确
  const validatortNumber = (rule, value, callback) => {
    if (!value) {
      return callback(new Error("请输入账户信息"));
    } else {
      if (validateNumber(value)) {
        callback();
      } else {
        return callback(new Error('账号格式不正确'))
      }
    }
  };
   
  export default {
      data() {
          return {
              // 省略别的数据定义
              ...
          
              // 表单验证
              formRules: {
                  accountNumber: [
                      {required: true,validator: validatorNumber,trigger: "blur"}
                  ]
              }
          }
      }
  }
  </script>
  

  validate.js部分

  
  /* 银行账户 */
  export function validateNumber(str) {
    const reg = /^([1-9]{1})(\d{14}|\d{18})$/
    return reg.test(str)
  }

  4、使用效验样例：

• 验证规则

• rules: {
     parkName: [
       { required: true, message: "园区名称不能为空", trigger: "blur" },
       { min: 2, max: 30, message: "计划名称只允许存在2-30个字符以内", trigger: "blur" },
       { pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,message: "请输入正确的申请人电话"}
     ]
  };
  

• ---

  以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证。

  1. 表单的提交按钮

  <!-- 表单 -->
  <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
      <el-form-item>
          <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
          <el-button @click="cancel">取消</el-button>
      </el-form-item>
  </el-form>

• <el-button>：按钮

• <el-button> -> type：按钮类型
  <el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 <el-form> 表单的 ref 属性值一致
    2. methods 方法

  methods: {
      // 保存
      onSubmit(formName) {
          this.$refs[formName].validate(valid => {  //表单提交时的验证
              if (valid) {
                  console.log("success submit!!");
              }else{
                  console.log("error submit!!");
              }
          });
      },
      // 取消
      cancel() { 
      }
  }
  //this.$refs[formName].validate()：formName 就是传入的 'rulesForm'，与 <el-form> 表单的 rel 属性值一致，这样就指定好需要验证的表单了。

补充：

 常用规则： 

常用规则：

1、是否合法IP地址:
pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
2、是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
3、 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
4、是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
5、整数填写
pattern:/^-?[1-9]\d*$/
6、正整数填写
pattern:/^[1-9]\d*$/
7、小写字母
pattern:/^[a-z]+$/
8、大写字母
pattern:/^[A-Z]+$/
9、大小写混合
pattern:/^[A-Za-z]+$/
10、数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/
11、前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/
12、密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
13、中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/
14、1-100的数字
pattern: /^([1-9][0-9]{0,1}|100)$/