jquery表單驗證

時間 2019-12-10
標籤 jquery 表單驗證欄目 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。