最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery+Validation表单验证

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-20 06:59浏览(1666)

jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery+Validation表单验证
分类:表单代码 > 表单插件 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

1、引入query和jquery.validate插件

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

HTML

我们放置一个表单,里面有多个类型的验证......

<form id="myform" action="#" method="post"> 
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
    <tbody>
     <tr class="table_title"> 
      <td colspan="2">jquery.validation 表单验证</td> 
     </tr> 
     <tr> 
      <td width="22%" align="right">用户名:</td> 
      <td><input type="text" name="user" id="user" class="input required" /> <p>用户名为3-16个字符,可以为数字、字母、下划线以及中文</p></td> 
     </tr> 
     <tr> 
      <td align="right">密码:</td> 
      <td><input type="password" name="pass" id="pass" class="input required" /> <p>最小长度:6 最大长度:16</p> </td> 
     </tr> 
     <tr> 
      <td align="right">确认密码:</td> 
      <td><input type="password" name="repass" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">性别:</td> 
      <td><input type="radio" name="sex" value="1" /> 男 <input type="radio" name="sex" value="0" /> 女</td> 
     </tr> 
     <tr> 
      <td align="right">E-mail:</td> 
      <td><input type="text" name="email" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">固定电话:</td> 
      <td><input type="text" name="tel" class="input required" /> <p>格式如:0731-12345678</p></td> 
     </tr> 
     <tr> 
      <td align="right">手机号码:</td> 
      <td><input type="text" name="phone" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">网站:</td> 
      <td><input type="text" name="url" class="input required" value="http://" /></td> 
     </tr> 
     <tr> 
      <td align="right">出生日期:</td> 
      <td><input type="text" name="birthday" class="input required" /> <p>格式如:1990-10-01</p></td> 
     </tr> 
     <tr> 
      <td align="right">工作年限:</td> 
      <td><input type="text" name="years" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">身份证号码:</td> 
      <td><input type="text" name="idcard" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">地区:</td> 
      <td><select name="address" class="required"> <option value="">请选择</option> <option value="1">长沙市</option> <option value="2">石河子市</option> <option value="3">北京市</option> <option value="4">东莞市</option> </select></td> 
     </tr> 
     <tr> 
      <td align="right">邮政编码:</td> 
      <td><input type="text" name="zipcode" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right">上传头像:</td> 
      <td><input type="file" name="photo" class="required" /> <p>头像为jpg,gif或者png格式的图片</p></td> 
     </tr> 
     <tr> 
      <td align="right">服务器IP:</td> 
      <td><input type="text" name="serverIP" class="input required" /></td> 
     </tr> 
     <tr> 
      <td align="right"> </td> 
      <td><input type="checkbox" name="low" class="required" /> 我已阅读并接受用户协议 </td> 
     </tr> 
     <tr> 
      <td align="right">验证码:</td> 
      <td><input type="text" name="captcha" class="input required" style="width:80px;" /> <img src="getcode.php" id="getcode" alt="看不清,点击换一张" align="absmiddle" style="cursor:pointer" /> </td> 
     </tr> 
     <tr> 
      <td height="42"> </td> 
      <td><input type="submit" class="btn" value="提 交" />   <input type="reset" class="btn" value="重 置" /></td> 
     </tr> 
    </tbody>
   </table> 
</form>

jQuery

表单验证方法如下:

$(function() {
    var validate = $("#myform").validate({
        rules: {
            user: {
                maxlength: 16,
                minlength: 3,
                userName: true,
                remote: {
                    url: "chk_user.php",
                    type: "post",
                    data: {
                        user: function() {
                            return encodeURIComponent($("#user").val());
                        }
                    }
                }
            },
            pass: {
                maxlength: 16,
                minlength: 6
            },
            repass: {
                maxlength: 16,
                minlength: 6,
                equalTo: "#pass"
            },
            sex: "required",
            email: {
                email: true
            },
            tel: {
                isTel: true
            },
            phone: {
                isMobile: true
            },
            url: {
                url: true
            },
            birthday: "dateISO",
            years: {
                digits: true,
                range: [1, 40]
            },
            idcard: "isIdCardNo",
            zipcode: "isZipCode",
            photo: {
                accept: "gif|jpg|png"
            },
            serverIP: "ip",
            captcha: {
                remote: "process.php"
            }
        },
        messages: {
            user: {
                remote: "该用户名已存在,请换个其他的用户名!"
            },
            repass: {
                equalTo: "两次密码输入不一致!"
            },
            sex: "请选择性别!",
            birthday: {
                dateISO: "日期格式不对!"
            },
            years: {
                number: "工作年限必须为数字!"
            },
            address: "请选择地区",
            photo: {
                accept: "头像图片格式不对!"
            },
            captcha: {
                remote: "验证码错误!"
            },
            low: " "
        },
        errorPlacement: function(error, element) {
            if (element.is(":radio")) error.appendTo(element.parent());
            else if (element.is(":checkbox")) error.appendTo(element.parent());
            else if (element.is("input[name=captcha]")) error.appendTo(element.parent());
            else error.insertAfter(element);
        },
        success: function(label) {
            label.html(" ").addClass("right");
        }
    });

    $("#getcode").click(function() {
        $imgstr = "getcode.php?randcode=" + Math.random();
        $(this).attr("src", $imgstr);
    });
    $("input:reset").click(function() {
        validate.resetForm();
    });
});
参数 描述 默认值
required:true 必输字段 -
remote: 使用ajax方法调用check.php验证输入值 -
email:true 必须输入正确格式的电子邮件 -
url:true 必须输入正确格式的网址 -
date:true 必须输入正确格式的日期 日期校验ie6出错,慎用 -
number:true 必须输入合法的数字(负数,小数) -
digits:true 必须输入整数 -
equalTo: 输入值必须和#field相同,比如:确认密码 -
accept: 输入拥有合法后缀名的字符串(上传文件的后缀) -
maxlength:5 输入长度最多是5的字符串(汉字算一个字符) -
minlength:10 输入长度最小是10的字符串(汉字算一个字符) -
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串 -
range:[5,10] 输入值必须介于 5 和 10 之间 -
max:5 输入值不能大于5 -
min:10 输入值不能小于10 -
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/60.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    03-21 14:44
    mushuihan
    日期 不能选啊 还用手动输入
1 2