miniui表單驗證守則總結


1,頁面效果圖

2,代碼實現

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>表單驗證規則總結</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
   
   
  <script src="../../scripts/boot.js" type="text/javascript"></script>
   
   
  <style type="text/css">
  .td1
  {
  text-align:right;
  }
  .td2
  {
  padding-left:15px;
  font-size:13px;
  font-family:Tahoma;
  }
  </style>
  </head>
  <body>
  <h1>表單驗證規則總結</h1>
   
  <div id="form1" >
  <table>
  <tr>
  <td class="td1">不允許為空:</td>
  <td>
  <input class="mini-textbox" required="true" />
  </td>
  <td class="td2">required="true"</td>
  </tr>
  <tr>
  <td class="td1">必須是郵箱地址:</td>
  <td>
  <input class="mini-textbox" vtype="email" required="true"/>
  </td>
  <td class="td2">vtype="email"</td>
  </tr>
  <tr>
  <td class="td1">必須是URL:</td>
  <td>
  <input class="mini-textbox" vtype="url" required="true"/>
  </td>
  <td class="td2">vtype="url"</td>
  </tr>
  <tr>
  <td class="td1">必須是整數(int):</td>
  <td>
  <input class="mini-textbox" vtype="int" required="true"/>
  </td>
  <td class="td2">vtype="int"</td>
  </tr>
  <tr>
  <td class="td1">必須是數字(float):</td>
  <td>
  <input class="mini-textbox" vtype="float" required="true"/>
  </td>
  <td class="td2">vtype="float"</td>
  </tr>
  <tr>
  <td class="td1">字符串長度(<= 6):</td>
  <td>
  <input class="mini-textbox" vtype="maxLength:6" required="true"/>
  </td>
  <td class="td2">vtype="maxLength:6"</td>
  </tr>
  <tr>
  <td class="td1">字符串長度(>= 2):</td>
  <td>
  <input class="mini-textbox" vtype="minLength:2" required="true"/>
  </td>
  <td class="td2">vtype="minLength:2"</td>
  </tr>
  <tr>
  <td class="td1">字符串長度(2-6):</td>
  <td>
  <input class="mini-textbox" vtype="rangeLength:2,6" required="true"/>
  </td>
  <td class="td2">vtype="rangeLength:2,6"</td>
  </tr>
  <tr>
  <td class="td1">字符數個數(2-6):</td>
  <td>
  <input class="mini-textbox" vtype="rangeChar:2,6" required="true"/>
  </td>
  <td class="td2">vtype="rangeChar:2,6"</td>
  </tr>
  <tr>
  <td class="td1">數字范圍(0-100):</td>
  <td>
  <input class="mini-textbox" vtype="range:0,100" required="true"/>
  </td>
  <td class="td2">vtype="range:0,100"</td>
  </tr>
  <tr>
  <td class="td1">必須是日期格式(如yyyy-MM-dd):</td>
  <td>
  <input class="mini-textbox" vtype="date:yyyy-MM-dd" required="true"/>
  </td>
  <td class="td2">vtype="date:yyyy-MM-dd"</td>
  </tr>
  <tr>
  <td class="td1">必須是日期格式(如MM/dd/yyyy):</td>
  <td>
  <input class="mini-textbox" vtype="date:MM/dd/yyyy" required="true"/>
  </td>
  <td class="td2">vtype="date:MM/dd/yyyy"</td>
  </tr>
  <tr>
  <td class="td1" style="color:Red;">郵箱格式,5~20個字符(組合):</td>
  <td>
  <input class="mini-textbox" vtype="email;rangeLength:5,20;" required="true"/>
  </td>
  <td class="td2">vtype="email;rangeLength:5,20;"</td>
  </tr>
  <tr>
  <td class="td1" style="color:Red;">必須輸入英文(自定義):</td>
  <td>
  <input class="mini-textbox" onvalidation="onEnglishValidation" />
  </td>
  <td class="td2">onvalidation="onEnglishValidation"</td>
  </tr>
  <tr>
  <td class="td1" style="color:blue;">必須輸入英文(自定義vtype):</td>
  <td>
  <input class="mini-textbox" vtype="english"/>
  </td>
  <td class="td2">vtype="english"</td>
  </tr>
  <tr>
  <td class="td1" style="color:Red;">必須輸入英文+數字(自定義):</td>
  <td>
  <input class="mini-textbox" onvalidation="onEnglishAndNumberValidation" />
  </td>
  <td class="td2">onvalidation="onEnglishAndNumberValidation"</td>
  </tr>
  <tr>
  <td class="td1" style="color:Red;">必須輸入中文(自定義):</td>
  <td>
  <input class="mini-textbox" onvalidation="onChineseValidation" />
  </td>
  <td class="td2">onvalidation="onChineseValidation"</td>
  </tr>
  <tr>
  <td class="td1" style="color:Red;">身份證驗證15~18位(自定義):</td>
  <td>
  <input class="mini-textbox" onvalidation="onIDCardsValidation" />
  </td>
  <td class="td2">onvalidation="onIDCardsValidation"</td>
  </tr>
  <tr>
  <td></td>
  <td>
  <input value="Login" type="button" onclick="submitForm()" />
  </td>
  </tr>
  </table>
  </div>
   
  <script type="text/javascript">
  mini.parse();
   
  function submitForm() {
  var form = new mini.Form("#form1");
   
  form.validate();
  if (form.isValid() == false) return;
   
  //提交數據
  var data = form.getData();
  var json = mini.encode(data);
  $.ajax({
  url: "../data/FormService.aspx?method=SaveData",
  type: "post",
  data: { submitData: json },
  success: function (text) {
  alert("提交成功,返回結果:" + text);
  }
  });
  }
  ////////////////////////////////////////
  function onEnglishValidation(e) {
  if (e.isValid) {
  if (isEnglish(e.value) == false) {
  e.errorText = "必須輸入英文";
  e.isValid = false;
  }
  }
  }
  function onEnglishAndNumberValidation(e) {
  if (e.isValid) {
  if (isEnglishAndNumber(e.value) == false) {
  e.errorText = "必須輸入英文+數字";
  e.isValid = false;
  }
  }
  }
  function onChineseValidation(e) {
  if (e.isValid) {
  if (isChinese(e.value) == false) {
  e.errorText = "必須輸入中文";
  e.isValid = false;
  }
  }
  }
  function onIDCardsValidation(e) {
  if (e.isValid) {
  var pattern = /\d*/;
  if (e.value.length < 15 || e.value.length > 18 || pattern.test(e.value) == false) {
  e.errorText = "必須輸入15~18位數字";
  e.isValid = false;
  }
  }
  }
   
  ////////////////////////////////////
  /* 是否英文 */
  function isEnglish(v) {
  var re = new RegExp("^[a-zA-Z\_]+$");
  if (re.test(v)) return true;
  return false;
  }
   
  /* 是否英文+數字 */
  function isEnglishAndNumber(v) {
   
  var re = new RegExp("^[0-9a-zA-Z\_]+$");
  if (re.test(v)) return true;
  return false;
  }
   
  /* 是否漢字 */
  function isChinese(v) {
  var re = new RegExp("^[\u4e00-\u9fa5]+$");
  if (re.test(v)) return true;
  return false;
  }
   
  /*自定義vtype*/
  mini.VTypes["englishErrorText"] = "請輸入英文";
  mini.VTypes["english"] = function (v) {
  var re = new RegExp("^[a-zA-Z\_]+$");
  if (re.test(v)) return true;
  return false;
  }
   
  </script>
   
  <div class="description">
  <h3>Description</h3>
  <p>
   
  </p>
  </div>
  </body>
  </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM