码迷,mamicode.com
首页 > Web开发 > 详细

使用JQuery.Validate插件来校验页面表单有效性

时间:2014-08-04 17:15:07      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   java   使用   os   io   for   

使用JQuery.Validate插件来校验页面表单有效性
?1. [代码] 常见的注册表单元素     

<form action="#" method="post"  id="regist"> 
    <table cellpadding="0" cellspacing="0" border="0" class="form_table"> 
        <tr> 
            <td valign="middle" align="right">用户名:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">真实姓名:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">密码:</td> 
            <td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd"  id="pwd"/> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">重复密码:</td> 
            <td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">年龄:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">电话:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">电子邮件:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">验证码:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td> 
                </tr> 
    </table> 
    <p> <input type="submit" class="button" value="Submit &raquo;" />  <input type ="reset" class = "button"  value = "Reset &raquo;"> </p> 
 </form>
2. [代码]HTML头部引入需要的函数库     

<head> 
    <title>欢迎注册</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
</head>http://www.huiyi8.com/flashjc/?
3. [代码]表单校验代码     
<script type="text/javascript"> 
        //表单填写情况校验 
        $(function(){ //代表页面加载以后执行 
            $("#regist").validate( //此处的#regist是JQuery的选择器,代表了校验id为regist的Form 
            { flash教程 
                rules: {//此处开始配置校验规则,下面会列出所有的校验规则 
                    username : "required", 
                    name : "required", 
                    pwd : {required:true,rangelength:[6,10]}, 
                    repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应 
                    age : {required:true,rangelength:[1,2]}, 
                    phone:{required:true,rangelength:[5,20]}, 
                    number:{required:true,}, 
                    email: {required:true,email: true,}, 
                }, 
                messages:{//自定义提示信息 
                    name:{required:"真实姓名不能为空!"}, 
                    pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"}, 
                    email:{required:"电子邮箱不能为空!"}, 
                } 
            } 
        ); 
        }); 
</script>
?

使用JQuery.Validate插件来校验页面表单有效性,布布扣,bubuko.com

使用JQuery.Validate插件来校验页面表单有效性

标签:style   http   color   java   使用   os   io   for   

原文地址:http://www.cnblogs.com/xkzy/p/3890500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!