精华内容
下载资源
问答
  • 用的是jquery的validate验证表单插件,资源都给好了,可以直接使用
  • Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <form novalidate> <label for=username>username: <input type=text id=...
  • 主要介绍了Bootstrap简单实用的表单验证插件BootstrapValidator用法,结合实例形式详细分析了Bootstrap表单验证插件BootstrapValidator基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
  • 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则。 自定义验证规则:可以很方便的自定义验证规则。 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能。 ...

    特点:

    • 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则。
    • 自定义验证规则:可以很方便的自定义验证规则。
    • 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能。
    • 实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。

    下载:

    http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    

    下载
    快速入门:
    第一步:引入jquery库和validation插件
    000
    使用前提:
    001
    检验方式:js代码方式
    000
    002
    案例一:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery-1.8.3.js"></script>
    		<script src="../js/jquery.validate.min.js"></script>
    		<script src="../js/messages_zh.js"></script>
    		<script>
    			$(function(){
    				$("#checkForm").validate({
    					rules:{
    						username:{
    							required:true,
    							minlength:6
    						},
    						password:{
    							required:true,
    							digits:true,
    							minlength:6
    						}
    					},
    					messages:{
    						username:{
    							required:"用户名不能为空",
    							minlength:"用户名不得少于6位"
    						},
    						password:{
    							required:"密码不能为空",
    							digits:"密码必须是整数!",
    							minlength:"密码不得少于6位"
    						}
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<form action="#" id="checkForm">
    			<label for="username">用户名:</label>
    			<input type="text" id="username" name="username"/><br />
    			<label for="password">密码:</label>
    			<input type="text" id="password" name="password"/><br />
    			<input type="submit" value="提交"/>
    		</form>
    	</body>
    </html>
    
    

    案例二:

    <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
    <script type="text/javascript" src="../../js/messages_zh.js" ></script>
    <script>
    	$(function(){
    		$("#registForm").validate({
    			rules:{
    				user:{
    					required:true,
    					minlength:2
    				},
    				password:{
    					required:true,
    					digits:true,
    					minlength:6
    				},
    				repassword:{
    					required:true,
    					digits:true,
    					minlength:6,
    					equalTo:"[name='password']"
    				},
    				email:{
    					required:true,
    					email:true
    				},
    				username:{
    					required:true,
    					minlength:2
    				},
    				sex:{
    					required:true
    				}
    			},
    			messages:{
    				user:{
    					required:"用户名不能为空!",
    					minlength:"用户名不得少于2个字符!"
    				},
    				password:{
    					required:"密码不能为空!",
    					digits:"密码必须是数字!",
    					minlength:"密码长度不得低于6位!"
    				},
    				repassword:{
    					required:"确认密码不能为空!",
    					digits:"密码必须是数字!",
    					minlength:"密码长度不得低于6位!",
    					equalTo:"两次密码不一致!"
    				},
    				email:{
    					required:"邮箱不能为空!",
    					email:"邮箱格式不正确!"
    				},
    				username:{
    					required:"姓名不能为空!",
    					minlength:"姓名不得少于2个字符!"
    				},
    				sex:{
    					required:"性别必须勾选!"
    				}
    			},
    			errorElement: "label", //用来创建错误提示信息标签
    			success: function(label) { //验证成功后的执行的回调函数
    				//label指向上面那个错误提示信息标签label
    				label.text(" ") //清空错误提示消息
    					.addClass("success"); //加上自定义的success类
    			}
    		});
    	})
    </script>
    
    展开全文
  • 这是一款使用html5和css3制作的表单必填字段美化效果插件。该表单美化插件共有3种效果:必填字段背景高亮效果、必填字段隐藏效果和必填字段3d效果。
  • JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert(自定义函数...
  • bootstrap表单验证插件,简易配置参数,即可验证表单,非常好用,欢迎下载。
  • 为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1、在控件中...
  • form表单校验插件(含详细注解)

    千次阅读 2017-07-12 10:33:15
    为什么要自己封装表单验证插件: 1、因为项目中用到的是sea.ja,需要对插件进行封装,而楼主不知如何封装validate.js,和其连带的其他插件; 2、因为项目中不是所有的校验都是通过插件校验的,也要自己手动校验一...

    说到表单校验,第一个想起来的肯定是jquery的validate.js,该插件的确是很强大,用在项目中也很健壮,但是为什么我选择重新自己封装一个插件呢?

    为什么要自己封装表单验证插件:

    1、因为项目中用到的是sea.js,需要对插件进行封装,而楼主不知如何封装validate.js,和其连带的其他插件;
    2、因为项目中不是所有的校验都是通过插件校验的,也要自己手动校验一部分,表单提交时不知如何提交;
    3、插件功能越多,就意味着越大…

    封装的表单验证如何调用?

    1、引入jquery.min.js,因为表单中的语法不是原生的,是基于jquery的,因此引入jquery时必备的;
    2、引入我们的插件form.js;
    3、html中通过标签引用,例如<input type="text" name="phone" flag="false" id="phone" placeholder="请输入您的手机号" check="required isMobile" />,其中id是必须的,check中的内容是你需要校验的项,flag="false"是是否通过校验的标识,接下来,我将进行详细讲解。

    form.js插件代码详解?

    
    (function ($) {
        $.fn.extend({
            "checkForm": function (options) {
                var flag = true;//标志每一个输入框中所有检验规则是否执行
                var root = this; //当前应用对象存入root
                var pwd; //密码存储
                var defaults = {
                    // 提示信息
                    tip_success: '<img src="../../xstatic/ximages/zhengque.png" />', //验证成功提示
                    loginname: {   //html中的标签的id值
                        remote: "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户登录名已存在",  //验证后的错误提示
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户名不能为空",
                        rangelength:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>用户名长度只能在 6-15位字符之间",
                        stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能包括英文字母、数字和下划线 ",
                        reg_rangelength:/^[a-zA-Z0-9]{6,15}$/,   //对应的正则校验
                        reg_stringCheck:/^[a-zA-Z][a-zA-Z0-9_]*$/
                    },
                    username: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名不能为空",
                        rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名长度只能在2-20位字符之间",
                        isChineseChar : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>姓名必须为汉字",
                        reg_rangelength:/^[\u4e00-\u9fa5]{2,10}$/,
                        reg_isChineseChar:/^[\u4E00-\u9FA5]+$/,
                    },
                    company: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>公司/企业名称不能为空"
                    },
                    yzm: {
                        remote: "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>验证码不正确",
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>验证码不能为空"
                    },
                    phone: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>手机号不能为空",
                        isMobile : "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>手机号码格式有误,请输入正确的手机号",
                        remote : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>手机号已注册,继续注册请与原账号解绑",
                        reg_isMobile:/^13[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|17[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/
                    },
                    inviteid: {
                        remote: "<img src='../../xstatic/ximages/cuowu.png ' style='margin-right: 8px;'>邀请码录入不正确",
                        checkFigure:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能含有数字",
                        reg_checkFigure:/^\d+$/
                    },
                    confirmPassword: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请再次输入密码",
                        equalTo:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>两次输入密码不一致"
                    },
                    plainPassword: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请输入密码",
                        rangelength:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>密码长度只能在 6-15位字符之间",
                        stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>只能包括英文字母、数字和下划线",
                        reg_rangelength:/^[a-zA-Z0-9]{6,15}$/,
                        reg_stringCheck:/^[a-zA-Z0-9_]*$/
                    },
                    place: {
                        rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>职位长度只能在2-15位字符之间",
                        reg_rangelength:/^[a-zA-Z0-9]{2,15}$/,
                    },
                    email: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>邮箱不能为空",
                        stringCheck:"<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请输入正确的邮箱格式",
                        reg_stringCheck:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
                    },
                    address: {
                        rangelength : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>地址长度只能在4-50位字符之间",
                        reg_rangelength:/^[a-zA-Z0-9]{4,50}$/,
                    },
                    businmark: {
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>营业执照注册号不能为空"
                    },
                    myfiles:{
                        required : "<img src='../../xstatic/ximages/tishi.png ' style='margin-right: 8px;'>请上传营业执照"
    
                    }
                };
    
                if (options) {        //如果不为空就合并参数
                    $.extend(defaults, options)
                }
    
                // 文本框失去焦点时验证
                $(":text,:password,textarea", root).each(function () {
                    $(this).blur(function () {
                        var _validate = $(this).attr("check");
                        if (_validate) {  //如果输入框需要校验,则执行check()方法
                            check($(this), _validate, $(this).val());
                        }
                    })
                });
                // 验证方法
                var check = function (obj, _match, _val) {
                    //obj为对应的需要校验的输入框
                    //match为html中check属性的属性值
                    //val为输入框的值
                    var id=obj.attr("id");//这里是为了取到对应的元素的校验值defaults[id]
                    var value=$.trim(_val);//防止空格
                    var arr = _match.split(" ");//校验项字符串转为数组
                    for(var i=0;i<arr.length;i++){
                        if(flag==true){  //flag控制是否进行下一项的校验,因此html中check="required isMobile"中的校验项有顺序,需要自己控制
                            switch (arr[i]) {   //arr[i]为校验项
                                case 'required':
                                    flag=value ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].required, false);
                                    //校验必须字段,及时的更改flag状态,校验成功返回true,失败返回false,成功之后才会进行下一项的校验,失败,直接提示失败文案
                                    break;//执行到此,case语句不再往下执行
                                case 'rangelength':
                                    if(!value){  //针对非必填项,没有required的校验,所以一定要判断一下value是否为空,空的时候不执行以下的校验项,因为该项可为空
                                        break;
                                    }else{
                                        flag=chk(value, defaults[id].reg_rangelength) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].rangelength, false);
                                        break;
                                    }
                                case 'stringCheck':
                                    if(!value){
                                        break;
                                    }else{
                                        flag=chk(value, defaults[id].reg_stringCheck) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].stringCheck, false);
                                        break;
                                    }
                                case 'pw1':  //该校验项应为password的最后一项校验
                                    flag="true";//flag标识
                                    pwd = value;  //实时储存
                                    var confirmValue=$("#confirmPassword").val();  //确认密码
                                    if(value==confirmValue){  //以下校验是为了防止密码和确认密码一致后,再去改动密码,而确认密码不会提示的问题
                                        $("#confirmPassword").attr("flag","true");//当两者一致时,标记确认密码校验通过
                                        showMsg($("#confirmPassword"), defaults.tip_success, true);
                                    }else if(value!=confirmValue&&confirmValue){
                                        $("#confirmPassword").attr("flag","false");//当两者不一致时,标记确认密码校验不通过
                                        showMsg($("#confirmPassword"),defaults.confirmPassword.stringCheck, false);
                                    }
                                    break;
                                case 'pw2'://该校验项应为confirmPassword的最后一项校验
                                    if(!value){
                                        break;
                                    }else{
                                        flag=pwdEqual(value, pwd) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].equalTo, false);
                                        break;
                                    }
                                case 'isChineseChar':
                                    if(!value){
                                        break;
                                    }else{
                                        flag=chk(value, defaults[id].reg_isChineseChar) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].isChineseChar, false);
                                        break;
                                    }
                                case 'isMobile':
                                    if(!value){
                                        break;
                                    }else{
                                        flag=chk(value, defaults[id].reg_isMobile) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].isMobile, false);
                                        break;
                                    }
                                case 'checkFigure':
                                    if(!value){
                                        break;
                                    }else{
                                        flag=chk(value, defaults[id].reg_checkFigure) ? showMsg(obj, defaults.tip_success, true) : showMsg(obj, defaults[id].checkFigure, false);
                                        break;
                                    }
                                    defaults:
                                        return true;
                            }
                        }else{  //flag==false时,一定校验不通过,
                            obj.attr("flag",false);
                        }
                        if(i==arr.length-1){  //当校验到最后一项时,需要将flag表示置为true,否则其他校验无法进入
                            //以下是需要调用接口才可验证的项,按照自己需求可就行改造
                            if(flag==true&&id=="phone"){  //校验手机号是否已注册
                                $.ajax({
                                    type: "post",
                                    async: false,
                                    url: "http://www.baidu.com/register/checkPhone",
                                    data: {phone: value},
                                    dataType: "text",
                                    success: function (data) {
                                        if(data=="false"){
                                            showMsg(obj, defaults[id].remote, false);
                                            flag=false;
                                            $(".send-yzm").css("color","rgba(0,0,0,.3)");
                                        }else{  //手机号校验成功
                                            $(".send-yzm").css("color","#313131");
                                        }
                                    }
                                });
                            }
                            if(flag==true&&id=="yzm"){  //校验验证码是否正确
                                var phone=$("#phone").val();
                                $.ajax({
                                    type: "post",
                                    async: false,
                                    url: "http://www.baidu.com/register/checkRandom",
                                    data: {yzm: value,phone:phone},
                                    dataType: "text",
                                    success: function (data) {
                                        if(data=="false"){
                                            showMsg(obj, defaults[id].remote, false);
                                            flag=false;
                                        }
                                    }
                                });
                            }
                            if(flag==true&&id=="loginname"){  //校验验证码是否正确
                                if(value){
                                    $.ajax({
                                        type: "post",
                                        async: false,
                                        url: "http://www.baidu.com/register/checkLoginName",
                                        data: {loginname: value},
                                        dataType: "text",
                                        success: function (data) {
                                            if(data=="false"){
                                                showMsg(obj, defaults[id].remote, false);
                                                flag=false;
                                            }
                                        }
                                    });
                                }else{
                                    $(obj).next(".errormsg").remove();
                                }
    
                            }
                            if(flag==true&&id=="inviteid"){  //校验验证码是否正确
                                if(value){
                                    $.ajax({
                                        type: "post",
                                        async: false,
                                        url: "http://www.baidu.com/register/checkInvite",
                                        data: {inviteid: value},
                                        dataType: "text",
                                        success: function (data) {
                                            if(data=="false"){
                                                showMsg(obj, defaults[id].remote, false);
                                                flag=false;
                                            }
                                        }
                                    });
                                }else{
                                    $(obj).next(".errormsg").remove();
                                }
                            }
                            obj.attr("flag",flag);//当前校验项是否通过由flag进行控制
                            flag=true;//全局flag复位
                        }
                    }
    
                };
    
                //判断两次密码是否一致
                var pwdEqual = function (val1, val2) {
                    return val1 == val2 ? true : false;
                };
    
                //正则验证
                var chk = function (str, reg) {
                    return reg.test(str);
                };
    
                //显示信息
                var showMsg = function (obj, msg, mark) {//文字显示的位置在此处控制
                    var id=obj.attr("id");
                    if(id=="phone"&&mark==false){
                        $(".send-yzm").css("color","rgba(0,0,0,.3)");
                    }
                    $(obj).next(".errormsg").remove();
                    var _html = "<span class='errormsg' style='font-size:14px;color:#ff3c00;margin-left:10px; '>" + msg + "</span>";
                    if(id=="yzm"){
                        $(obj).next().next(".errormsg").remove();
                        $(obj).next().after(_html);
                    }else{
                        $(obj).after(_html);
                    }
                    return mark;
                }
    
            }
        })
    })(jQuery);
    
    

    总结:代码注释的很是详细,相信大家看完之后就会明白其原理,简单明了,可操作性强。但是仍然有几个地方需要提醒大家注意:

    1. <form action="http://baidu.com" method="post" flag="true">form表单需要指定flag标记,true表示表单可提交,false表示表单不可提,这是为了方便大家重写submit方法,可在方法中添加自己需要控制的东西,要是有插件不能校验的校验项,可通过判断form的flag是否为true,true的话再去判断,false的话直接提示插件校验结果。
    2. <form action="http://baidu.com" method="post" flag="true">默认的flag应为true,因为submit方法没有写在插件中,所以点击提交的时候需要我们去校验是否为空,因为插件中的事件都是在失去焦点时触发的,因此一旦输入框触发了失去焦点事件,插件一定做了校验,所以没有做检验的一定为空,提交方法如下:
    function _onSubmit() {
            $(":text,:password", $(".content-warp")).each(function () {
                var flag=$(this).attr("flag");
                //判断每个输入框的是否通过校验
                var id=$(this).attr("id");
                var value=$.trim($(this).val());
                if(flag=="false"){   //如果没有进行填选
                //一旦有一个未flase,form表单不可提交
                    $(".form1").attr("flag","false");      if(id!="loginname"&&id!="inviteid"&&id!="registerYZM"){
                    //这个为过滤掉不必填项
      if(!value){
           $(this).next(".errormsg").remove();
           var _html = "<span class='errormsg' style='font-size:14px;color:#ff3c00;margin-left:10px; '>" + defaults[id].required + "</span>";
    if(id=="yzm"){                             $(this).next().next(".errormsg").remove();
           $(this).next().after(_html);
         }else{
             $(this).after(_html);
         }
           }
        }
    }
    });
    }
    

    .
    3. <input type="text" name="phone" flag="false" id="phone" placeholder="请输入您的手机号" check="required isMobile" />每一个校验项默认的flag应该为false,等校验成功后将该项flag置为true,
    4. 最后提醒一句,一旦涉及到表单提交,最好写一个防止重复提交的方法,因为这是一个好的习惯。

    展开全文
  • 自定义表单验证

    2015-05-13 19:46:59
    简单的js表单验证 function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名!"; return false; } ...
  • 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...
  • 表单验证插件 表单验证主要是针对表单元素的值进行验证,并根据验证结果给出文字或图片提示; 主要验证用户是否输入了内容或者输入的内容是否符合要求 常用的表单验证插件有:jQuery-validate、formValidator ...

    表单验证插件
    表单验证主要是针对表单元素的值进行验证,并根据验证结果给出文字或图片提示;
    主要验证用户是否输入了内容或者输入的内容是否符合要求

    常用的表单验证插件有:jQuery-validate、formValidator
    

    jquery-validate
    首先引入validate的js文件及本地化文件
    1、将验证直接写在html中
    -required 表示必填字段
    -type="email"表示有效的邮箱地址:包含用户名@域名
    -type=“url” 表示有效的url,包含协议和域名
    -equalTo:“选择器”; 输入的内容是否等于某元素的内容
    2、在js中进行验证
    首先需要设置表单控件的name属性
    验证语法:
    form对象.validate({
    rules:{
    name值 :“验证条件”,
    name值 : “验证条件”,

    name值 : “验证条件”
    },
    messages:{
    name值 :“提示信息”,
    name值 : “提示信息”,

    name值 : “提示信息”
    }
    });

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script type="text/javascript" src = "jquery-3.1.1.min.js"></script>
        <script src = "jquery.validate.min.js"></script>
        <script src = "messages_zh.min.js"></script>
    </head>
    <body>
        <form action="" id="form1">
            <input type="text" id="uname" required>
            <br>
            <input type="email">
            <br>
            <input type="url">
            <br>
            <input type="date">
            <br>
            <input type="number">
            <input type="submit">
    
        </form>
        <form id="form2">
            <input type="text" id="username" name="username">
            <input type="password" id="password" name="password">
            <input type="text" name="uemail">
            <input type="text" name="phone">
            <input type="submit">
        </form>
        <script>
            $("#form1").validate();
            $("#form2").validate({
                rules:{
                    username : "required",
                    password : "required",
                    uemail : {
                        email : true,
                        required:true
                    },
                    phone:{
                        equalTo:"123"
                    }
                },
                messages:{
                    username : "用户名写错了!",
                    password : "密码不对!",
                    uemail: {
                        email:"邮箱不正确",
                        required:"赶紧填邮箱"
                    },
                    phone:"输入的不相等"
                }
            })
        </script>
    </body>
    </html>
    

    、dialog
    通过:jq对象.dialog()进行绑定
    元素的title属性会作为弹出框的标题显示
    元素的文本内容(可以识别html标记)

    dialog默认是自动打开的,我们可以通过设置atuoOpen属性进行设置是否自动打开
    autoOpen:true/false;
    
    显示按钮:、
    buttons:{"按钮标题":按钮触发函数}
    
    是否允许拖动
    draggable:true/false;为true表示允许拖动,false表示不允许拖动
    
    是否允许调整大小
    resizable:true/false;  true表示允许调整,false表示不允许调整
    

    2、排序(sortable)
    可以将元素转换为拖放风格的列表,可以通过拖放的方式进行顺序的调整

    显示为网格
    
    
    !DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src = "jquery-3.1.1.min.js"></script>
        <script src = "jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
        <style>
            #ul1 li{
                width: 200px;
                border: 1px solid red;
                margin:10px;
                padding: 10px;
                list-style: none;
                background: gray;
            }
            #ul2{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #ul2 li{
                margin: 5px;
                padding: 10px;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: gray;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id = "d1" title="我的弹出框">
            <h1>标题</h1>
            这是一个自定义的弹出框
        </div>
        <div id = "d2" title="我的弹出框">
            <h1>标题</h1>
            这是一个自定义的弹出框
        </div>
        <input type="button" value="打开" class="openDialog">
        <input type="button" value="一个按钮" class="haveOneBtn">
    
        <ul id="ul1">
            <li>12</li>
            <li>23</li>
            <li>4</li>
            <li>r</li>
            <li>g</li>
        </ul>
    
        <ul id="ul2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <script>
            $("#d1").dialog({
                autoOpen:false,//是否默认打开\
                //添加按钮
                buttons:{
                    "按钮":function(){
                        console.log("-----");
                        //关闭dialog
                        $(this).dialog("close");
                    },
                    "确定":function(){
    
                    }
                }
            });
            $(".openDialog").click(function(){
                // 打开对话框
                $("#d1").dialog("open");
            });
    
            // 一个按钮
            $("#d2").dialog({
                autoOpen:false,//是否默认打开\
                //添加按钮
                buttons:{
                    "按钮":function(){
                        console.log("-----");
                        //关闭dialog
                        $(this).dialog("close");
                    }
                },
                draggable:false,//不允许拖动
                resizable:false
    
            });
            $(".haveOneBtn").click(function(){
                // 打开对话框
                $("#d2").dialog("open");
            });
    
            $("#ul1").sortable({
                opacity:0.6,//拖动过程中的半透明效果
                cursor:"move",//拖动时鼠标的样式
                axis:"y"
            });
    
            // 显示为网格
            $("#ul2").sortable();
            // 调整为网格
            // $("#ul2").disableSelection();
        </script>
    </body>
    </html>
    
    
    展开全文
  • 例如它不内置表单验证,接下来,我把自己实现验证框架的思路分享出来。 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证(数据动态,规则动态) 去网络上搜索了一些框架,...
  • 每当表单控件中的值发生变化时,Angular 就会进行验证,并生成一个验证错误的列表(对应着 INVALID 状态)或者 null(对应着 VALID 状态)。 2示例 这是我写的一个小demo,这种验证方式无需写js代码全部在标签 里使用...
  • BootStrapValidator表单验证插件的坑还真不少,又让我碰上一个… BootStrapValidator验证的表单中只可有一个 type="submit" 的按钮。 我这样写了之后 (代码如下) ,点击其它按钮仍会触发验证… 1.错误代码 //...
  • 4.对”你的评论“是否必填验证。 结果图 例子 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>快速上手</title> <script type...
  • vue表单验证插件 vue-verify-plugin V2.0

    千次阅读 2017-07-25 16:48:36
    表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。 v-verify 修饰符说明 该指令最后一个修饰符为自定义分组 //自定义teacher分组 v-verify.teacher //自定义student分组...

    verify

    github:https://github.com/liuyinglong/verify
    npm:https://www.npmjs.com/package/vue-verify-plugin

    install

    npm install vue-verify-plugin

    use

    <template>
        <div class="input-box clearFix">
            <div>
                <input v-model="age" v-verify="age" placeholder="age"/>
                <label class="fl" v-remind="age"></label>
            </div>
            <div>
                <input type="text" class="phoneIcon fl" placeholder="手机号码" v-model="regInfo.phone" v-verify="regInfo.phone">
                <label class="fl" v-remind="regInfo.phone"></label>
            </div>
            <button v-on:click="submit">提交</button>
        </div>
    </template>
    
    <script>
        import Vue from "vue";
        import verify from "vue-verify-plugin";
        Vue.use(verify,{
            blur:true
        });
    
        export default {
            name: 'app',
            data () {
                return {
                    age:"",
                    regInfo: {
                        phone: ""
                    }
                }
            },
            verify: {
                age:"required",
                regInfo: {
                    phone: ["required","mobile"]
                }
            },
            methods:{
                submit: function () {
                    console.log(this.$verify.check());
                }
            }
        }
    </script>
    

    验证错误信息说明

    验证之后的错误存储在 vm. verify. errors 中,可自行打印出
    vm. verify. errorArray 存储上一次验证的错误

    配置说明

    配置传入一个对象

    {
        rules:{}//自定义验证方法
        blur:Bool //失去焦点时 是否开启验证
    }

    指令说明

    v-verify

    在表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。

    v-verify 修饰符说明

    该指令最后一个修饰符为自定义分组

    //自定义teacher分组
    v-verify.teacher
    //自定义student分组
    v-verify.student
    
    //验证时可分开进行验证  
    
    //验证student 分组
    this.$verify.check("student")
    //验证teacher 分组
    this.$verify.check("teacher")
    //验证所有
    this.$verify.check();
    v-verify指令也可使用 arg参数进行验证分组

    如果同时使用修饰符和arg分组 则arg会覆盖修饰符分组

    v-verify:student
    //验证student 分组
    this.$verify.check("student")

    v-remind 验证错误提示

    v-remind修饰符说明

    .join 展示所有错误 用逗号隔开

    v-verified (在2.0版本中 被v-remind替代)

    v-verified 错误展示,当有错误时会展示,没有错误时会加上style:none,默认会展示该数据所有错误的第一条
    该指令为语法糖(见示例)

    <input v-model="username" v-verify="username">
    <label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label>
    <!--等价于-->
    <label v-verified="$verify.$errors.username"></label>
    v-verified 修饰符说明

    .join 展示所有错误 用逗号隔开

    默认验证规则

    • email 邮箱规则验证
    • mobile 手机号码验证
    • required 必填
    • url 链接规则验证
    • maxLength 最多maxLength个字符串(可自定义message)
    • minLength 最少minLength个字符串(可自定义)
    new Vue({
        verify: {
            username: [
                "required",
                {
                    minLength:2,
                    message: "姓名不得小于两位"
                },
                {
                    maxLength:5,
                    message: "姓名不得大于5位"
                }
            ],
            mobile:["required","mobile"],
            email:"email",
            url:"url",
            pwd: {
                minLength:6,
                message: "密码不得小于6位"
            }
        }
    })
    
    
    
    

    自定义验证规则

    <template>
        <div class="input-box clearFix">
            <div>
                <input v-model="age" v-verify="age" placeholder="age"/>
                <label class="fl" v-remind="age"></label>
            </div>
            <div>
                <input type="text" class="phoneIcon fl" placeholder="手机号码" v-model="regInfo.phone" v-verify="regInfo.phone">
                <label class="fl" v-remind="regInfo.phone"></label>
            </div>
                    <div>
                        <input v-model="teacher" v-verify="age" placeholder="teacher"/>
                        <label class="fl" v-remind="teacher"></label>
                    </div>
            <button v-on:click="submit">提交</button>
        </div>
    </template>
    
    <script>
        import Vue from "vue";
        import verify from "vue-verify-plugin";
    
        var myRules={
    
            max6:{
                test:function(val){
                    if(val.length>6) {
                        return false
                    }
                    return true;
                },
                message:"最大为6位"
            }
    
        }
        import Vue from "vue";
        import verify from "vue-verify-plugin";
        Vue.use(verify,{
            rules:myRules
        });
    
    
        export default {
            name: 'app',
            data () {
                return {
                    age:"",
                    teacher:"",
                    regInfo: {
                        phone: ""
                    }
                }
            },
            verify: {
                age:"required",
                teacher:"max6",
                regInfo: {
                    phone: ["required","mobile"]
                }
            },
            methods:{
                submit: function () {
                    console.log(this.$verify.check());
                }
            }
        }
    </script>
    展开全文
  • 表单验证插件 表单验证主要是针对表单元素的值进行验证,并根据验证结果给出文字或图片提示; 主要验证用户是否输入了内容或者输入的内容是否符合要求 常用的表单验证插件有:jQuery-validate、formValidator ...
  • bootstrap 模态框表单验证 Validator插件

    千次阅读 2018-04-17 10:49:26
    BooStrapValidator网络引用地址:http://www.bootcdn.cn/bootstrap-validator/ BooStrapValidator文件下载 gitHub地址https://github.com/nghuuphuoc/bootstrapvalidator/这里模拟了一个后台数据返回,即请求url 为 ...
  • 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大DOM-API,感兴趣的你可以不要错过了哦
  • 基于uni-app插件市场中"配置表单"修改,修正原版不能运行的错误,通过传入配置数据动态渲染出表单,目前支持的表单组件有text,number,textarea,radio,checkbox,date,select,html。支持配置必填以及正则校验。提供...
  • 表单验证控件 支持文本框,密码框,下拉框,单选框,多选框,文本域以及对象等等的验证,包括必填,对比,正则等等验证 使用方法: 进行验证: $("#form").TsForm(); 清空表单: $("#form").TsFormReset(); 属性: minlength:...
  • uniapp表单验证

    千次阅读 2020-11-04 00:11:25
    if(checkRes){ uni.showToast({title:"验证通过!", icon:"none"}); }else{ uni.showToast({ title: graceChecker.error, icon: "none" }); } }, // 重置表单 formReset: function(e) { console.log('...
  • 摘要:脚本资源,jQuery,表单验证插件,日历插件 KooTeam基于标签的表单验证插件-标签对象支持class和id,示例中还包括有日历插件。使用说明:  1.页面中引入jquery.js库和koo.js  2.验证标签对象可以是id或class两...
  • 最近项目用到了一个很强大的表单验证。记录下。官方地址:http://formvalidation.io/api/ 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。 向上效果:   先导入...
  • 标签化表单验证文档 定义标签属性(*是必写属性) 提示语(placeholder) ...必填验证(requried) 是否验证:macco-required="true/false/不写" (true为必填项,另两种是可选项) 必填提示:macco-required...
  • 今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范
  • 表单验证的通用部分提炼出来,做成一个简易插件,方便调用。 已将源码放到GitHub上,名字叫zValidate。 手机可扫描下图查看示例,PC端可点击此处查看: 一、原理 1)需要引入zepto.js库,便于DOM操作。 2)将...
  • 最常使用的JavaScript的场合就是表单验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件——Validation。 Validation拥有如下特点: 内置验证规则:用于必填、数字、E-mail、URL和信用卡...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,051
精华内容 1,620
关键字:

表单必填验证插件