JQuery验证 [注册]

最新推荐文章于 2022-11-22 10:34:00 发布

原创最新推荐文章于 2022-11-22 10:34:00 发布 · 659 阅读

CC 4.0 BY-SA版权

本文介绍了一种利用jQuery插件实现网页表单验证的方法，包括用户名、密码、电子邮件等字段的有效性检查，并通过示例代码展示了如何进行配置。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery/Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery/jquery.validate.js" type="text/javascript"></script>
    <script src="jquery/messages_cn.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $('#form1').validate({
               rules:{
               userName:{required:true,minlength:6,maxlenth:12},
               Email:{required:true,email:true},
               password: { required:true, minlength:6, maxlenth:6},
               passwordOk: { required:true, equalTo:"#pwd"},
               zhuYe: { required: true ,url:true},
               shengRi: { required: true,dateISO:true   },
               xueYa: { required: true ,number:true}
               },
               errorshow:function(error,element){
              // $(element).val(error);
               error.appendTo(element.siblings('span'));
               }
           })
       })
    </script>
<style type="text/css">
 .w
 { 
     color:Red ;
 } 
         
  </style>
    
</head>
<body>
<form action="" id="form1">
<table>
<tr><td>用户名：</td><td><input name="userName" type="text" /><span class ="w">*</span></td></tr>
<tr><td>密  码：</td><td><input name="password" type="text" id="pwd"/><span class ="w">*</span></td></tr>
<tr><td>确认密码：</td><td><input name="passwordOk" type="text" /><span class ="w">*</span></td></tr>
<tr><td>主页：</td><td><input name="zhuYe" type="text" /><span class ="w">*</span></td></tr>
<tr><td>生日：</td><td><input name="shengRi" type="text" /><span class ="w">*</span></td></tr>
<tr><td>血压：</td><td><input name="xueYa" type="text" /><span class ="w">*</span></td></tr>
<tr><td>邮  箱</td><td><input name="Email" type="text" /><span class ="w">*</span></td></tr>
<tr></tr>
</table>
</form>
</body>
</html>