w_validation.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <h2 class="contentTitle">表单验证</h2>
  2. <div class="pageContent">
  3. <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this)">
  4. <div class="pageFormContent nowrap" layoutH="97">
  5. <dl>
  6. <dt>必填:</dt>
  7. <dd>
  8. <input type="text" name="name" maxlength="20" class="required" />
  9. <span class="info">class="required"</span>
  10. </dd>
  11. </dl>
  12. <dl>
  13. <dt>必填+邮箱:</dt>
  14. <dd>
  15. <input type="text" name="email" class="required email" alt="请输入您的电子邮件"/>
  16. <span class="info">class="required email"</span>
  17. </dd>
  18. </dl>
  19. <dl>
  20. <dt>电话:</dt>
  21. <dd>
  22. <input type="text" name="phone" class="phone" alt="请输入您的电话"/>
  23. <span class="info">class="phone"</span>
  24. </dd>
  25. </dl>
  26. <dl>
  27. <dt>密码:</dt>
  28. <dd>
  29. <input id="w_validation_pwd" type="password" name="password" class="required alphanumeric" minlength="6" maxlength="20" alt="字母、数字、下划线 6-20位"/>
  30. <span class="info">class="required alphanumeric" minlength="6" maxlength="20"</span>
  31. </dd>
  32. </dl>
  33. <dl>
  34. <dt>确认密码:</dt>
  35. <dd>
  36. <input type="password" name="repassword" class="required" equalto="#w_validation_pwd"/>
  37. <span class="info">class="required" equalto="#xxxId"</span>
  38. </dd>
  39. </dl>
  40. <dl>
  41. <dt>整数:</dt>
  42. <dd>
  43. <input type="text" name="digits" class="digits" />
  44. <span class="info">class="digits"</span>
  45. </dd>
  46. </dl>
  47. <dl>
  48. <dt>浮点数:</dt>
  49. <dd>
  50. <input type="text" name="number" class="number" />
  51. <span class="info">class="number"</span>
  52. </dd>
  53. </dl>
  54. <dl>
  55. <dt>最小值:</dt>
  56. <dd>
  57. <input type="text" name="min" min="1"/>
  58. <span class="info">min="1"</span>
  59. </dd>
  60. </dl>
  61. <dl>
  62. <dt>最大值:</dt>
  63. <dd>
  64. <input type="text" name="max" max="10"/>
  65. <span class="info">max="10"</span>
  66. </dd>
  67. </dl>
  68. <dl>
  69. <dt>最小值-最大值:</dt>
  70. <dd>
  71. <input type="text" name="min_max" min="1" max="10"/>
  72. <span class="info">min="1" max="10"</span>
  73. </dd>
  74. </dl>
  75. <dl>
  76. <dt>最小长度:</dt>
  77. <dd>
  78. <input type="text" name="minlength_maxlength6" minlength="6" />
  79. <span class="info">minlength="6"</span>
  80. </dd>
  81. </dl>
  82. <dl>
  83. <dt>最大长度:</dt>
  84. <dd>
  85. <input type="text" name="minlength_maxlength10" maxlength="10"/>
  86. <span class="info">maxlength="10"</span>
  87. </dd>
  88. </dl>
  89. <dl>
  90. <dt>最小长度-最大长度:</dt>
  91. <dd>
  92. <input type="text" name="minlength_maxlength" minlength="6" maxlength="20"/>
  93. <span class="info">minlength="6" maxlength="20"</span>
  94. </dd>
  95. </dl>
  96. <dl>
  97. <dt>信用卡:</dt>
  98. <dd>
  99. <input type="text" name="creditcard" class="creditcard" />
  100. <span class="info">class="creditcard"</span>
  101. </dd>
  102. </dl>
  103. <dl>
  104. <dt>字母、数字、下划线:</dt>
  105. <dd>
  106. <input type="text" name="alphanumeric" class="alphanumeric" />
  107. <span class="info">class="alphanumeric"</span>
  108. </dd>
  109. </dl>
  110. <dl>
  111. <dt>字母:</dt>
  112. <dd>
  113. <input type="text" name="lettersonly" class="lettersonly" />
  114. <span class="info">class="lettersonly"</span>
  115. </dd>
  116. </dl>
  117. <dl>
  118. <dt>网址:</dt>
  119. <dd>
  120. <input type="text" name="url" class="url" />
  121. <span class="info">class="url"</span>
  122. </dd>
  123. </dl>
  124. <dl>
  125. <dt>remote:</dt>
  126. <dd>
  127. <input type="text" name="remote" remote="validate_remote.html"/>
  128. <span class="info">唯一性验证input添加属性:remote="xxxUrl"</span>
  129. </dd>
  130. </dl>
  131. <dl>
  132. <dt>customvalid+remote:</dt>
  133. <dd>
  134. <input type="text" name="remote2" remote="validate_remote.html" customvalid="customvalidXxx(element)"/>
  135. <span class="info">customvalid="customvalidXxx(element)" | remote="xxxUrl"</span>
  136. </dd>
  137. </dl>
  138. <div class="divider"></div>
  139. <p>自定义扩展请参照:dwz.validate.method.js</p>
  140. <p>错误提示信息国际化请参照:dwz.regional.zh.js</p>
  141. </div>
  142. <div class="formBar">
  143. <ul>
  144. <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>
  145. <li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>
  146. </ul>
  147. </div>
  148. </form>
  149. </div>
  150. <script type="text/javascript">
  151. function customvalidXxx(element){
  152. if ($(element).val() == "xxx") return false;
  153. return true;
  154. }
  155. </script>