强大的表单验证插件 jquery validate

本文介绍了 jQuery Validate 表单验证插件的安装与使用方法。该插件提供丰富的验证规则,如邮箱、URL等,并支持自定义规则及提示信息。文章通过示例展示了如何配置验证规则和消息。

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

jquery validate是最流行的表单验证插件之一,jquery ui成员编写,至今都有维护更新

作用: 丰富的表单验证,什么邮件,链接,还可以自定义各种规则,提示等,基本上能满足所有的表单验证;


下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip


使用介绍:

导入库:

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

简单使用:

var myform=$("#myform").validate({
        debug:true,//debug模式 提交只会检查不会提交 调试的时候用
        rules:{//规则
            username:{//name为username的input验证规则
                required:true,//是否必填
                minlength:2,//最小长度
                maxlength:10,
            },
            password:{
                required:true,
                minlength:2,
                maxlength:16,
            }
        },
        messages:{//定义提示信息
            username:{
                required:"必须填写用户名",//required条件触发时提示信息
                minlength:"用户名至少两位",
                maxlength:"用户名最多十位",
            },
            password:{
                required:"必须填写密码",
                minlength:"密码至少两位",
                maxlength:"密码最多十六位",
            }
        },
}}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            background-image: url(background.jpg);
            background-repeat: no-repeat;
            background-size: 100%
        }
        .myform{
            width: 270px;
            position: absolute;
            left: 500px;
            top: 200px;
            opacity: 0.6;
        }
        .myform div input{
            width: 180px;   
            display: block;
            float: left;
            margin-top: 20px;
            line-height: 25px;
            height: 25px;


        }
        .myform span{
            display:block;
            float: left;
            margin-top: 20px;
            line-height: 25px;
            height: 25px;
            width: 80px;
            font-size: 14pt;
            font-weight:bold;
            color: white;

        }
        .btn{
            width: 80px;
            height: 30px;
            margin: 20px 30px 0 20px
        }
    </style>

</head>
<body>
    <form class="myform" id="myform">
    <div>
        <span>用户名:</span>
        <input type="text" name="username" id="username" />
    </div>
    <div>
        <span>密 码:</span>
        <input type="password" name="password" id="password" />
    </div>
        <input type="submit" value="登录" class="btn">
        <input type="button" value="注册" class="btn">
    </form>

</body>
</html>
  1. required:ture~~~必填项
  2. email:true~~~~必须是正确格式的电邮
  3. url:true~~~~~~必须是正确格式的网址
  4. data:true~~~~~必须是正确格式的日期
  5. number:true~~~必须是合法数字
  6. digits:true~~~~~~必须是整数
  7. creditcard:true~~必须是合法信用卡号
  8. equalTo:“password”必须和name为password的值相同,用于验证两次密码一致
  9. accept:true~~~~~ 必须有合法文件后缀名
  10. max:100~~~~~最大值100
  11. min:1~~~~~~~最小值1
  12. minlength:2~~~字符串最小长度2
  13. maxlength:10~~字符串最大长度10

常用方法:

1.用其他事件取代submit默认事件:

$("myform").validate{(
    submitHandler:function(form){
        console.log("submit");
        form.submit();//默认的submit事件 ;
    }
)}

2.debug 调试的时候使用,只检查表单,不提交

 $("#myform").validate({
        debug:true
    });

3.ignore:忽略某些元素不验证

ignore:".ignore"//类名为ignore的元素不验证

4.自定义错误信息样式(css–加在css样式中)

input.error { border: 1px solid red; }
label.error {
    background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}
label.checked {
    background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

5.每个字段验证通过调用的函数(比如输入框验证后可以在后面加个勾)



success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

6.验证的触发方式修改(都是boolean类型) 除了focusCleanup默认为false其他都默认true;

onsubmit    提交时验证。设置为 false 就用其他方法去验证。  
onfocusout  失去焦点时验证(不包括复选框/单选按钮)。   
onkeyup     在 keyup 时验证。    
onclick     在点击复选框和单选按钮时验证。     
focusInvalid    提交表单后,未通过验证的表单会获得焦点。    
focusCleanup    如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值