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

jQuery+Validation表单验证

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

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

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

jQuery+Validation表单验证
分类:表单代码 > 表单插件 难易:初级
查看演示 下载资源 下载积分: 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: [140
            }
            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