jquery validate 使用示范

最新推荐文章于 2025-04-05 18:14:53 发布

原创最新推荐文章于 2025-04-05 18:14:53 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用jQuery的前端表单验证案例，演示了如何设置各种验证规则和提示信息，包括用户名、密码、电子邮件等字段的校验。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
   <title>validateDemo.html</title>

   <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is mypage">
   <meta http-equiv="content-type" content="text/html;charset=UTF-8">


   
   <link rel="stylesheet" type="text/css"href="../js/jQuery/validate/validation.css">
   <script type="text/javascript"src="../js/jQuery/jquery.js"></script>
   <script type="text/javascript"src="../js/jQuery/validate/jquery.validate.pack.js"></script>
   
   <script type="text/javascript"src="../js/jQuery/validate/additional-methods.js"></script>
   
   <script type="text/javascript"src="../js/jQuery/validate/messages_cn.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         //通过id查找要进行校验的表单
         $("#signupForm").validate({
            //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
            //onsubmit:false,
            //onfocusout:false,
            //onkeyup:false,
            //onclick:false,

            //验证通过后执行的动作
            //success:function(label){
            //   label.text("ok!").addClass("success");
             //},
            //手动设置错误信息的显示方式
            errorPlacement: function(error, element) {
               error.appendTo(element.parent().next());
              //    if (element.is(":radio") )
             //      error.appendTo( element.siblings("span") );
            //    else if (element.is(":checkbox") ){
             //      error.appendTo ( element.siblings("span") );
            //    }
             //       else
             //      error.appendTo( element.parent() );
             }
             ,
            rules:{
            username:{
                required:true,
                rangelength:[ 5, 7 ]
             },
             password:{
                required:true,
                minlength:5
             },
            confirm_password: {
                required:true,
                minlength:5,
                equalTo:"#password"
             },
             sex: {
                required:true
             },

             email:{
                required:true,
                email:true
             },
             language:{
                required:true,
               rangelength:[2,3]
             },
             book:{
                required:true,
               rangelength:[2,3]
             },
             agree:"required",
             upload:{
                required:true,
                accept:"flv|jpg"
             }
          },
         //校验提示信息
          messages:{
             username:{
             required:"请输入用户名",
             rangelength:"用户名长度必须为{0}到{1}个字符或汉字"
          },
          password:{
             required:"请输入密码",
             minlength:"密码的最小长度是{0}个字符"
          },
         confirm_password: {
             required:"请输入确认密码",
             minlength:"确认密码的最小长度是{0}个字符",
             equalTo:"确认密码与密码不相等"
          },
          email:"请输入正确的邮箱",
          language:{
             required:"该项必须填写",
             rangelength:"请您选择{0}到{1}项语言"
          },
          book:{
             required:"该项必须选择",
            rangelength:"请您选择{0}到{1}本书"
          },
          agree:"您没有同意使用协议",
          upload:{
                required:"请输入上传文件的路径",
                accept:"上传文件的格式只能是 flv或jpg"
             }
       }
    });
       })
   </script>
   


</head>
<bodystyle="font-family:'宋体','Arial Narrow';
      font-size:12px;
      ">



   

   <form class="cmxform" id="signupForm" method="get"action="">

   <fieldset >
      <legend>字段校验、日历控件完整示例</legend>
      <table>
      <tr>
         <td><labelfor="username">Username</label></td>
         <td><inputid="username" name="username"/></td>
         
         <td></td>
      </tr>
      <tr>
         <td><labelfor="password">Password</label></td>
         <td><inputid="password" name="password" type="password"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="confirm_password">Confirmpassword</label></td>
         <td><inputid="confirm_password" name="confirm_password" type="password"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="sex">sex</label></td>
         <td><pre><inputid="sex1" name="sex" type="radio"/>男              <input id="sex2" name="sex" type="radio"/>女</pre></td>
         <td></td>
      </tr>

      <tr>
         <td><labelfor="email">Email</label></td>
         <td><input id="email"name="email"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="upload">Upload</label></td>
         <td><input type="file"name="upload"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="language">language</label></td>
         <td><inputtype="checkbox" name="language" value="cn"/>汉语
         <input type="checkbox" name="language" value="en"/>英语
         <input type="checkbox" name="language" value="jp"/>日语
         <input type="checkbox" name="language" value="ge"/>德语
         </td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="book">book</label></td>
         <td><selectname="book" multiple="multiple" >
         <optionvalue="en">英语书</option>
         <optionvalue="cn">汉语书</option>
         <optionvalue="jp">日语书</option>
         <optionvalue="ge">德语书</option>
         </select></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="agree">同意该协议</label></td>
         <td><inputtype="checkbox" class="checkbox" id="agree" name="agree"/>
         </td>
         <td></td>
      </tr>
      <tr>
         <td><inputclass="submit" type="submit" value="Submit"/></td>
      </tr>
      </table>
   </fieldset>
   </form>

   







</body>
</html>