精华内容
下载资源
问答
  • 主要介绍了query validate添加自定义验证规则,可以验证邮箱、邮政编码等,看代码参考使用
  • 表单验证中如果数据库中已经存在的用户,当我们在注册界面再次输入已经存在的用户,就会出现如”您输入的用户名已经存在,请重新输入…”的提示,如下我们用一个jquery–validate框架添加一个自定义的验证规则。...

    表单验证中如果数据库中已经存在的用户,当我们在注册界面再次输入已经存在的用户,就会出现如”您输入的用户名已经存在,请重新输入…”的提示,如下我们用一个jquery–validate框架添加一个自定义的验证规则。

    //给validate插件添加一个验证的方法(添加一个验证的规则)
            $.validator.addMethod(
                "checkUsername",//自定义校验规则的名称
                function(value,element,params){//自定义校验规则的实现
                    console.log(params);
                    //value)表单元素值
                    //element)校验的元素对象
                    //params)校验规则输入的参数
                    var flag = true;
                    //发送一个Ajax,到服务器进行验证用户存在
                    $.ajax({
                        "async":false,//同步操作
                        "url":"${pageContext.request.contextPath}/checkUsername",
                        "type":"POST",
                        "data":{"username":value},
                        "dataType":"json",
                        "success":function(data){
                            flag = data.isExist;//true--存在  false--不存在
                        }
                    });
                    //需要返回值 false----该校验器校验失败    true---校验通过
                    return !flag;
                }
            );
    //使用自定义规则核心代码:
    $(function() {
            $("#regForm").validate({
                rules : {
                    "username" : {
                        "required" : true,
                        //checkUsername即为自定义的规则
                        "checkUsername":"ckuname"
                    }
    messages : {
                    "username" : {
                        "required" : "用户名不能为空",
                        //checkUsername自定义的规则提示
                        "checkUsername":"用户名重复"
                    },
    展开全文
  • 在jquery.validate里面并没有给你预先实现,当然,还可能有各种各样奇葩的校验规则嘞,jquery.validate不实现太多的预定义规则也好,否则就显得臃肿不堪了。当遇到jquery.validate里面没有的规则时,就需要你自己..

      在“jquery.validate表单验证插件”里面我说了jquery.validate表单验证插件,介绍了其基本的使用,包括直接写在html元素里面以及使用js两种方式,并介绍了一些预定义的校验规则。但是,仅仅这样还是不能满足日常的开发需求的,比如如何校验手机号?在jquery.validate里面并没有给你预先实现,当然,还可能有各种各样奇葩的校验规则嘞,jquery.validate不实现太多的预定义规则也好,否则就显得臃肿不堪了。当遇到jquery.validate里面没有的规则时,就需要你自己定义了,这篇文章就看看如何在jquery.validate中自定义校验规则。

            其实说白了,不管是jquery.validate里面的预定义规则还是等会我们要自定义的校验规则,都是一个函数,比如我写了url:true这个规则,其实就是调用了jquery.validate的url方法,传入的参数是"true"。

    效果图:

    image.png

    现在html代码片段:

    <form class="form-horizontal" id="addForm">
    	<div class="form-group">
            	<label  class="col-sm-offset-1 col-sm-2 control-label">手机</label>
            	<div class="col-sm-6">
            	  <input type="text" class="form-control" name="phone" >
            	</div>
    	</div>
    	<div class="form-group">
            	<div class="col-sm-offset-3 col-sm-6">
            	  <input type="button" class="btn btn-default" style="margin-left:40px" data-dismiss="modal"  value="取消">
            	  <input type="button" id="btnAdd" class="btn btn-primary" style="margin-left:40px" value="确认">
            	</div>
    	</div>					  
    </form>

    首先需要定义验证手机的规则:

    //定义规则	
    	$.validator.addMethod("isphone", function(value, element, param){
    		 //方法中又有三个参数:value:被验证的值, element:当前验证的dom对象,param:参数(多个即是数组)
    		 console.log(value);//输入的值
    		 console.log(element);//<input type="text" class="form-control error" name="phone">
    		 console.log(param);//你传入的true
    		 return new RegExp(/^1[3458]\d{9}$/).test(value);
    		 
    	 }, "手机号码不正确");	

    定义好规则之后,可以使用js或者html的方式使用自己定义的规则了。

    使用js的方式:

    //使用js的方式校验	 
     $("#addForm").validate({
               rules: {
            	   phone: {
            	     isphone: true
                       }
               },
               messages: {
               }
            });

    因为我自己定义的方法isphone,如果校验不成功的返回值是“手机号码不正确”,这正是我所需要的,所以在使用js的方式时我没有再重新定义返回值。

    使用html的方式:

    <input type="text" class="form-control" name="phone"  isphone="true">

    最后在提交的时候校验就可以了:

    $("#btnAdd").click(function(){
    		if(!$("#addForm").valid()){return false;}
    		$.ajax({
    			type:"post",
    			url:"af_saveCompany",
    		    data:str2Json("#addForm"),
    		    success:function(data){
    		    	//....
    		    }
    		});
    	});

    提醒:因为我定义的isphone规则并没有真正使用到传入的参数,我这里使用isphone:true,其实传入什么都无所谓了,因为我并没有使用到入参true。

    展开全文
  • 需求:再已有验证(也是基于validate插件,验证功能写在表单中,不是用js代码,如:required写在input中)基础上如何自定义,并动态绑定到指定元素上,并通过$("#formid").valid();方法进行验证? 网上找了一圈,...

    需求:再已有验证(也是基于validate插件,验证功能写在表单中,不是用js代码,如:required写在input中)基础上如何自定义,并动态绑定到指定元素上,并通过$("#formid").valid();方法进行验证?

    网上找了一圈,基本上都是采用validate的$.validator.addMethod方法来自定义验证规则,然后通过$("#id").rules("add", 方法来动态绑定。但是有问题,会提示:无法获取未定义或 null 引用的属性“settings”的错误。

    解决方法:

    关键点就是必须先执行$("#formid").validate()方法,再执行动态添加。参考文章:https://www.iteye.com/blog/wyf-2319482

    至于什么原因不知道,validate官方文档没看明白,demo也没有很多。

    示例代码:

    $("#editForm").validate();
    $.validator.addMethod("administrative_punishment", function(value) {   
    	//do some valid;
        return false;
    }, function() { 
    	return "这是验证文字";
    });
    			
    $("#cxgsyy").rules("add", {administrative_punishment: true});
    $("#xyxfrq").rules("add", {administrative_punishment: true}); 
    $("#editForm").valid();

     

    展开全文
  • jQuery Validate添加自定义验证方法

    万次阅读 2018-01-08 15:46:31
    jQuery Validate添加自定义验证方法中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,使用方法如下: jQuery.validator.addMethod("regex", //...

    jQuery Validate添加自定义验证方法中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,使用方法如下:

    jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称
    function(value,element,params){//addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数)
    var exp = new RegExp(params);//实例化正则对象,参数为传入的正则表达式
    return exp.test(value);         //测试是否匹配
    },"格式错误");//addMethod第3个参数:默认错误信息
    $("#fm").validate({
        rules:{
                loginpwd:{
                    required:true,
                    minlength:6,
                    maxlength:12,
                    regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"
                },
                loginpwd2:{
                    required:true,
                    equalTo: "#loginpwd",
                    regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"
                }
        },
        messages:{
            loginpwd:{
              required: "请输入密码",
              minlength: "密码长度不能小于 6 个字母",
              regex:"密码必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间"
                },
          loginpwd2:{
              required: "请输入密码",
              minlength: "密码长度不能小于 6 个字母",
              equalTo: "两次密码输入不一致",
              regex:"密码必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间"
                }
    }
    });
    

    以下是总结的其他的验证:

    // 手机号码验证
    jQuery.validator.addMethod("mobile", function(value, element) {
        var length = value.length;
        var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "手机号码格式错误");  
    
    // 电话号码验证   
    jQuery.validator.addMethod("phone", function(value, element) {
        var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
        return this.optional(element) || (tel.test(value));
    }, "电话号码格式错误");
    
    // 邮政编码验证   
    jQuery.validator.addMethod("zipCode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "邮政编码格式错误");
    
    // QQ号码验证   
    jQuery.validator.addMethod("qq", function(value, element) {
        var tel = /^[1-9]\d{4,9}$/;
        return this.optional(element) || (tel.test(value));
    }, "qq号码格式错误");
    
    // IP地址验证
    jQuery.validator.addMethod("ip", function(value, element) {
        var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/;     return this.optional(element) || (ip.test(value) && (RegExp./;     return this.optional(element) || (ip.test(value) && (RegExp.1 < 256 && RegExp.2 < 256 && RegExp.2 < 256 && RegExp.3 < 256 && RegExp.$4 < 256));
    }, "Ip地址格式错误");
    
    // 字母和数字的验证
    jQuery.validator.addMethod("chrnum", function(value, element) {
        var chrnum = /^([a-zA-Z0-9]+)$/;
        return this.optional(element) || (chrnum.test(value));
    }, "只能输入数字和字母(字符A-Z, a-z, 0-9)");
    
    // 中文的验证
    jQuery.validator.addMethod("chinese", function(value, element) {
        var chinese = /^[\u4e00-\u9fa5]+$/;
        return this.optional(element) || (chinese.test(value));
    }, "只能输入中文");
    
    // 下拉框验证
    $.validator.addMethod("selectNone", function(value, element) {
        return value == "请选择";
    }, "必须选择一项");
    
    // 字节长度验证
    jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
        var length = value.length;
        for (var i = 0; i < value.length; i++) {
            if (value.charCodeAt(i) > 127) {
                length++;
            }
        }
        return this.optional(element) || (length >= param[0] && length <= param[1]);
    }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
    展开全文
  • 由于需求需要,${name}按3个字数算,而实际${...通过$.validator.addMethod去添加一个验证方法,名字为content value 是内容 params 是验证规则(我填写的是70) $(function(){ $.validator.addMethod( "con...
  • 本身框架自带很多验证,但是如果想自定义规则或者国际化,就需要一些自定义操作 1. 在页面的组件引用: 2. 在vue的js类里添加规则: 注意,有些规则不需要写promise回调,有些不写的话会报错: Cannot read ...
  • jquery.validate自定义规则

    千次阅读 2018-01-04 10:37:03
    通过addMethod用户可以自定义自己的验证规则 如上面的增加的 jQuery.validator.addMethod( " stringCheck " ,  function (value, element)  { 这个方法,应该放在那里,个人认为,只要放在<script></...
  • 自定义jQValidate校验规则

    千次阅读 2015-08-24 18:31:24
    自定义jQ Validate校验规则
  • 我们在使用Jquery-validate插件验证表单时候,默认的提供的校验规则有限,不够用怎么办,可以自己添加自定义校验规则;默认的触发方式有时候也不符合业务需求,需要进行定制化配置修改,下面就来介绍下如何添加...
  • validate自定义规则不生效问题

    千次阅读 2020-06-03 15:44:32
    js代码 jQuery.validator.addMethod("dateFormat", function(value, element, param) { var ...最后看到一篇文章 添加链接描述 主要问题就是 validate rules 是根据name属性进行关联的,而不是所谓的id,切记切记!!!
  • validate表单校验添加自己的验证方法 多手机号验证 //多手机号验证 jQuery.validator.addMethod("isPhones",function(value,element){ value = value.replace(",", ","); var phonesarr=value.split(","); ...
  • validate校验及自定义验证规则

    万次阅读 2019-05-14 14:20:38
    3.自定义验证规则 addMethod(name,method,message)方法 参数 name 是添加的方法的名字。 参数 method 是一个函数,接收三个参数 (value,element,param) 。 value 是元素的值,element 是元素本身,param...
  • ThinkPHP Validate自定义规则

    千次阅读 2019-03-08 00:09:37
    然后就用ThinkPHP5 封装好的Validate验证规则,开发业务时经常会遇到某些字段,ThinkPHP5验证规则没有我们想要的。这时就需要封装多个自定义验证规则了。 如上图:封装一个受保护的方法 参数 $value 是传递过来的...
  • 这个方法里有三个参数,第一个是校验规则的名字,第二个是校验方法,返回布尔类型,第三个是错误信息,假如校验方法返回为true校验通过,显示错误信息,如果为false,则显示错误信息 this.optional(element) 这段代码指的...
  • validate表单验证添加自定义方法

    千次阅读 2018-10-11 15:21:08
    自定义方法中有三个参数: 第一个是规则的名字,类似required规则名字。 第二个是改规则的实现部分,需要验证哪些条件在这里写验证方法,当return返回true时代表验证条件符合不触发。 第三个是提示消息。 其中...
  • 从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则,下面的示例中添加了一个用于正则表达式验证的扩展验证的方法
  • 1.安装vee-validate npm install vee-validate --save 2.main.js里引用vee-validate插件 import Vue from 'vue' import VeeValidate,{ Validator } from 'vee-validate' Vue.use(VeeValidate); ...
  • thinkphp6使用自定义验证规则validate

    千次阅读 2020-07-22 20:09:26
    在应用目录下面新建一个validate目录 在目录创建一个BaseValidate文件 继承Thinkphp6的validate层 <?php namespace app\api\validate; use app\common\exception\lib\ParameterException; use think\facade\...
  • jquery validate添加自定义方法:开始日期小于结束日期验证规则及使用
  • jquery validate规则rules 的required :true 只能过滤校验字符长度 但是空字符串也是有长度的,导致校验空字符或其他特殊字符是能校验过去的,所以需要加一个自定义通用方法来处理! 下面是具体代码 $....
  • 简单方便,支持添加自定义验证器 支持初步验证检查,自定义如何判断非空 支持将规则按场景进行分组设置。或者部分验证 支持在进行验证前对值使用过滤器进行净化过滤 支持在进行验证初步处理和后置处理 支持自定义每...
  • element-ui的表单验证规则只是简单的规则,很多时候我们需要添加自定义规则。比如 let checkNumL = (rule, value, callback) => { if (String(value).length !== 11) { return callback(new Error('联系...
  • vee-validate vue 2.0自定义表单验证

    千次阅读 2017-12-28 15:41:09
    vee-validate vue 2.0自定义表单验证亲测可用学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。一、安装您可以通过npm或通过CDN安装此插件。 1. NPMnpm install vee-validate --save2. CDN...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,247
精华内容 6,498
关键字:

validate添加自定义规则