jquery表单验证 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_cn.js"></script>
</head>
<body>
    <form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证表单-输入框、单选、多选、下拉框</legend>
    
    
    <p><label>简介</label><input id="" name="jianjie" type="text"></p>
    <p><label>用户名</label><input id="username" name="username" type="text"></p>
    <p><label>密码</label><input id="password" name="password" type="password"></p>
    <p><label>验证密码</label><input id="confirm_password" name="confirm_password" type="password"></p>
    <p><label>Email</label><input id="email" name="email"></p>
    <p>
        <label>我同意</label><input type="radio" class="radio"  name="agree" checked = "checked"><label>我不同意</label><input type="radio" class="radio"  name="agree">
        <label for="agree" style="display: none;" class="error">请选择同意还是不同意</label>
    </p>
    
    <p>
        <label>下拉框</label>
        <select name="carlist">
           <option value="" selected="selected">----请选择----</option>
           <option value="volvo">香蕉</option>
           <option value="saab">苹果</option>
           <option value="opel">菠萝</option>
        </select> 
    </p>
    
    <fieldset id="newsletter_topics">
      <label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash</label>
      <label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz</label>
      <label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester</label>
      <label for="topic" class="error" style="display: none;">请选择两个主题</label>
    </fieldset>
    
    <p><input class="submit" type="submit" value="提交"></p>
  </fieldset>
</form>




<script type="text/javascript">
$().ready(function() {
    // 在键盘按下并释放及提交后验证提交表单
      $("#signupForm").validate({
        rules: {
          jianjie: {
             regex: "/^[a-zA-Z]{1,30}$/"
           },
          username: {
            required: true,
            regex: "/^[0-9]{1,20}$/"
          },
          password: {
            required: true,
            minlength: 5
          },
          confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
          },
          email: {
            required: true,
            email: true
          },
          agree: "required",
          
          carlist:"required",
          
          topic: {
            required: true,
            minlength: 2
          }
        },
        
        messages: {
          jianjie: {
            regex: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color='#FF0000' size='1'>英文开头---</font>"
          },
          username: {
            required: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color='#FF0000' size='1'>请输入用户名</font>",
            minlength: "用户名必需由两个字母组成",
            regex: "长度5到10"
          },
          password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母"
          },
          confirm_password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母",
            equalTo: "两次密码输入不一致"
          },
          email: "请输入一个正确的邮箱",
          agree: "****特殊：见上面lable标签中的值******",
          carlist:"请选择一个下拉值",
          topic: "****特殊：见上面lable标签中的值******"
        },
        
        submitHandler:function(form){  
            alert("submitted222222222222222");     
            form.submit();  
        }
    });
    
    
    
    
    //regex提供正则表达式校验，可以写多个，自己添加即可 
    jQuery.validator.addMethod("regex",function(value, element, param){  
        var str = param.replace(/\/\//g,"\/");
        var re = eval(str);   //转成正则
        if(re.test(value)){
            return true;
        }else{
            return false;
        }
    });  
});
</script>
</body>
</html>

 

posted @ 2016-09-28 18:51  apache-xinge  阅读(137)  评论(0)  编辑  收藏  举报