ValidateBox（驗證框）
阿新 • • 發佈：2018-12-15
validatebox(驗證框)的設計目的是為了驗證輸入的表單欄位是否有效。如果使用者輸入了無效的值，它將會更改輸入框的背景顏色，並且顯示警告圖示和提示資訊。該驗證框可以結合form(表單)外掛並防止表單重複提交。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>驗證框</title> <!-- 引入easyUI:JQuery檔案支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script> <!-- 引入easyUI --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script> <!-- 引入中文支援 --> <script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script> <!-- 引入easyUI主題css檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link> <!-- 引入easyUI 圖示導航檔案 --> <link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head> <script type="text/javascript"> // 驗證密碼相等規則 $.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: '兩次密碼不一致' } }); // 自定義最小長度規則 $.extend($.fn.validatebox.defaults.rules, { minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: '帳號長度必須大於5' } }); // Javascript建立驗證框:email $(document).ready(function(){ $('#vv2').validatebox({ required: true, validType: 'email' }); }); </script> <body> <% /* required:必輸項 validType:驗證型別 */ %> <form action="#"> <!-- 通過標籤建立驗證框:email --> 郵 箱 : <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /><br> 郵 箱 : <input id="vv2" type="text"/><br> <!-- 檢查密碼和確認密碼是否相同 --> 密 碼 : <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /><br> 確認密碼 : <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true" validType="equals['#pwd']" /> <br> 帳 號 : <input class="easyui-validatebox" data-options="validType:'minLength[5]'"><br> <!-- 日期框 --> 日 期 : <input id="dd" type="text" class="easyui-datebox" required="required"></input> </form> </body> </html>