jquery rules 输入验证 想加入对输入框内容的合法性验证

Posted 2023-03-29

rules:
"*******":
required:true,
maxlength:32
在此加入..........
,
"*******":
required:true

,
messages:
"*****":
required:"*****！",
maxlength:"****"
在此加入.....:只允许出现中英文,数字,-,_,
,
"*****":
required:"******！"

参考技术A 建议采用jquery-easyui框架验证哦，中文，数字，长度，email，url等都提供了很好的验证方式，相对简单一些，不用自己写的那么复杂。 参考技术B 可以使用addMethod方法自定义，然后使用正则表达式进行判断追问

我也看了addMethod,
jQuery.validator.addMethod("stringCheck", function(value, element)
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);

但不知道该如何调用到我的rules中,只知道方法名叫 stringCheck,value是要验证的字串,但element不知道是干什么用的,

本回答被提问者采纳

Vue使用antd中input组件去验证输入框输入内容-rules-案例

效果图 

 示例代码

<a-form-model-item prop="phone">
  <a-input v-model="form.phone" :maxLength="11" placeholder="手机号" />
</a-form-model-item>
<a-form-model-item prop="code">
  <a-input v-model="form.code" placeholder="验证码" />
</a-form-model-item>
<a-form-model-item prop="num">
  <a-input v-model="form.num" placeholder="请输入数字" />
</a-form-model-item>

<script>
export default 
  name: "Login",
  data() 
    const validateCode = (rule, value, callback) => 
      if (value === "") 
        callback(new Error("验证码为空"));
        return false;
       else if (value !== this.identifyCode) 
        callback(new Error("验证码不正确"));
        return false;
       else 
        callback();
      
    ;
    //使用正则表达式验证手机号
    const checkPhone = (rule, value, callback) => 
      if (!value) 
        return callback(new Error("手机号不能为空"));
       else 
        //获取工具类中的手机号正则表达式
        const phoneReg =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d8$/;
        if (phoneReg.test(value)) 
          callback();
         else 
          //如果验证输入错误就清空
          this.form.phone = "";
          return callback(new Error("请输入正确的手机号"));
        
      
    ;
    return 
      form: 
        phone: "",
        password: "",
        code: "",
    num:"",
      ,
      rules: 
        phone: 
          validator: checkPhone,//自定义校验
          //   required: true,
          //   message: "手机号",
          trigger: "blur",
        ,
        password:  required: true, message: "请输入密码", trigger: "blur" ,
        code: [
          
            // validator: validateCode,
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          ,
        ],
    num: [
          
            required: true,
            pattern: new RegExp(/^[0-9]\\d*$/, g),//正则表达式校验
            message: 请输入类型为整数!,
            trigger: blur,
          ,
        ],
      ,
    ;
  ,
  computed: 
    // 用于校验手机号码格式是否正确
    phoneNumberStyle() 
      let reg = /^1[3456789]\\d9$/;
      if (!reg.test(this.form.phone)) 
        return false;
      
      return true;
    ,
  ,
;
</script>