Vue＞＞＞iView＞＞＞rule＞＞＞校验字段(手机号&邮箱)——一蓑烟雨任平生

本文详细介绍了使用Vue.js进行表单验证的四个关键步骤：设置表单引用、定义实体和校验规则、编写校验方法以及触发验证。通过实例展示了如何验证手机号和邮箱，并提供了清空验证和最终验证的实现。强调了字段定义的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老规矩，记录代码，废话不多说，直接看代码

第一步

<Form ref="formValidate" :model="tableData" :label-width="150" :rules="ruleValidate">

ref : 表格(方便后面提交整体校验)
:model : 实体类
:rules :校验规则

第二步

<Col span="8">
                  <FormItem label="手机号：" prop="mobile">
                    <Input
                      type="text"
                      v-model="tableData.mobile"
                      :maxlength="20"
                    ></Input>
                  </FormItem>
                </Col>

prop : 关联校验字段(后期js里面需要对应)

第三步

return {
      ruleValidate: {
        companyName: [
          {
            required: true,
            message: '公司名称不可以为空'
          }
        ],
        mobile: [
          {validator: checkPhone, trigger: 'blur'},
          {type: 'number',message:"必须数字"}
          //多个条件,多个{}进行分开
        ],
        //跟下面那个等价<!--iview自定义验证-->
        email: [{validator: validateEmail, trigger: 'blur'}]
        //<!--iview自带email验证-->
        email: [{
          type: 'email',
          message: '请输入正确的邮箱',
          trigger: 'blur'
        }]
      }
      }

required : 必填
validator : 验证规则
type : 可输入类型
blur : input框 change 下拉框

第四步

//校验手机号
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };

    //校验邮箱
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请正确填写邮箱'));
      } else {
        if (value !== '') {
          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (!reg.test(value)) {
            callback(new Error('请输入有效的邮箱'));
          }
        }
        callback();
      }
    };

校验规则

清空验证

this.$refs['formValidate'].resetFields();

最终验证

this.$refs['formValidate'].validate(val => {
        if (val) {
        }
    })

注意事项

一定要定义字段!定义字段!定义字段!

 tableData: {
        loginName: '',
        displayName: '',
        enableFlag: '',
        mobile: '',
        email: '',
        mainAccountFlag: '',
        unitName: '',
        endDate: ''
      },