element ui 手机号码验证 自定义验证邮箱 手机号和电话号

Posted 2023-03-19

参考技术A // 自定义验证邮箱
var checkEmail = (rule, value, callback) =>
const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
if (regEmail.test(value))
console.log(regEmail.test(value));
return callback();
else
callback(new Error("请输入合法邮箱"));

;
// 自定义验证手机号
var checkPhone = (rule, value, callback) =>
console.log(typeof value, "\\/");
const phoneReg = /^1[3|4|5|7|8][0-9]9 /
if (!reg.test(value))
callback(new Error('请输入正确的电话号码或手机号'))
else
callback()

,

去引用就好 checkPhone

tel: [
required: true,
message: "不能为空",
trigger: "blur"
,

validator:checkPhone,
trigger: "blur"

],

Element-ui 自定义表单验证规则

 

有时在后台我们需要对输入的数值进行简单的正则验证,此时ElementUi 自带的验证已不能满足我们的需求,故需要我们自己去写 验证规则

有两种书写位置:

• 一种在data中写规则
• 另一种在methods中写规则

 

表单:

<el-form-item label="需求砍价人数：" prop="haggleNumber">
       <el-input v-model="formData.haggleNumber" clearable>        
       </el-input>
</el-form-item>    

 

方法一: 在data中写规则

data() {
    // 自定义校验规则
    var bargainMoney = (rule, value, callback) => {
      // rule 对应使用bargainMoney自定义验证的 对象
      // value 对应使用bargainMoney自定义验证的 数值 
      // callback 回调函数
      const r = /^+?[1-9][0-9]*$/; // 正整数
      if (value == null || String(value).trim() === "") {
        callback(new Error("不能为空"));
      } else if (!r.test(value)) {
        callback(new Error("请输入正整数"));
      }else {
        callback();
      }
    };
　　

　　 return {

      formData: {

        haggleNumber: "", // 砍价人数

      },

      rules: {

        haggleNumber: [

          {

            required: true,

            validator: bargainMoney,

            trigger: "blur"

          }

        ],

      }

　　 }

}

 

方法二: 在methods中写规则

data() {
　return {
      formData: {
        haggleNumber: "", // 砍价人数
      },
      rules: {
        haggleNumber: [
          {
            required: true,
            validator: this.bargainMoney,
            trigger: "blur"
          }
        ],
      }
　}
},
methods: {
    // 自定义校验规则
    bargainMoney(rule, value, callback){
      // rule 对应使用bargainMoney自定义验证的 对象
      // value 对应使用bargainMoney自定义验证的 数值 
      // callback 回调函数
      const r = /^+?[1-9][0-9]*$/; // 正整数
      if (value == null || String(value).trim() === "") {
        return callback(new Error("不能为空"));
      } else if (!r.test(value)) {
        return callback(new Error("请输入正整数"));
      }else {
        return callback();
      }
    },
}

 

二者的区别在于:

• 在data 中不需要通过 return 回调函数,而在 methods 中则需要
• 在methods中写的验证规则 ,需要在rules中配置规则时通过 this获取

 

分享一刻:

　　国内数一数二的代码托管平台,一起来为国内开源生态贡献一份力量吧 

　　Gitee