頁面分析 EasyUI的form表單的一個自由的校驗開啟
阿新 • • 發佈：2019-02-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tspace</title> <link rel="icon" type="image/x-icon" href="/res/images/tspace/favicon.ico"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet"type="text/css" href="/res/js/jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="/res/css/common.css"> <link rel="stylesheet" type="text/css" href="/res/css/icon.css"> <script type="text/javascript"> var basePath = ''; var noAuthBtn = ''; var authField = ''; </script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="/res/js/common.js"></script> </head> <body style="visibility: hidden;"><link rel="stylesheet" type="text/css" href="/res/css/login.css"> <script type="text/javascript"> if (self != top) { //主頁不允許在iframe中 alert("我是login.html頁面"); console.log("我是login.html頁面"); top.window.location.reload(); }</script> <div class="crm-register-bg"> <div class="crm-register-form"> <header class="crm-login1-header"> <h1>歡迎登入tspace</h1> </header> <form id="ff"class="easyui-form" method="post" action="tspaceHead/main" data-options="novalidate:true"> <div class="crm-register-body crm-login1-body"> <div class="crm-register-input-warpper"> <input type="text" class="crm-register-input easyui-validatebox" data-options="required:true,validType:'length[2,20]'" value="tspace" name="user_name" id="user_name" placeholder="請輸入使用者名稱" tabindex="1"> </div> <div class="crm-register-input-warpper"> <input type="password" class="crm-register-input easyui-validatebox" data-options="required:true" class="crm-register-input easyui-validatebox" value="123456" name="password" id="password" placeholder="請輸入密碼" tabindex="1" onfocus=""> </div> <div class="crm-register-input-warpper" style="display: none;"> <input type="text" class="crm-register-input " data-options="required:true,validType:'length[4,4]'" name="randomCode" id="randomCode" placeholder="請輸入識別碼，點選圖片可更換" tabindex="3"> <img id="codeImage" title="點選重新整理驗證碼" src="login/randomCode" style="position: absolute; right: 20px; top: 4px; cursor: pointer;" onclick="this.src = 'login/randomCode?d=' + new Date().getTime();"> </div> </div> <div class="crm-register-footer"> <a href="javascript:login();" class="pg-btn-submit dinline-block " tabindex="3" act="login_btn">登 錄</a> </div> </form> <p class="crm-loginfooter-info" style=""> <a href="javascript: $('#user_name').val('readonly');" class="register_link" tabindex="6" act="reg_link">readonly</a> 登陸，體驗只讀許可權 </p> </div> </div> <script type="text/javascript"> $(function() { //獲取焦點樣式 $("#ff :input").focus(function() { $(this).parent().addClass("actived"); }).blur(function() { $(this).parent().removeClass("actived"); }); }); //回車登陸 document.onkeydown = function() { if(event.keyCode==13) { login(); return false; } } function login() { if($("#ff").form('enableValidation').form('validate')) { var param = {"user_name":$(":input[name='user_name']").val(), "password":$(":input[name='password']").val(), "randomCode":$(":input[name='randomCode']").val() } $.post("/login/login", param, function(data) { if(data.result == "success") { $('#ff').submit(); location.href = "main"; }else { if(data.data) { $("#randomCode").parent().show(); $("#randomCode").validatebox({ required: true }); } showWarnMsg(data.msg); $("#codeImage").click(); } }); } } </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
分析：jQuery EasyUI 表單外掛 - Form 表單
通過 $.fn.form.defaults 重寫預設的 defaults。
表單（form）提供多種方法來執行帶有表單欄位的動作，比如 ajax 提交、載入、清除，等等。當提交表單時，呼叫 'validate' 方法來檢查表單是否有效。
用法
建立一個簡單的 HTML 表單。構建表單並給 id、action、method 賦值。
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
</div>
...
</form>
讓表單（form）成為 ajax 提交的表單（form）
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
去做一個提交動作
// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
通過額外的引數提交
$('#ff').form('submit', {
url:...,
onSubmit: function(param){
param.p1 = 'value1';
param.p2 = 'value2';
}
});
處理提交響應
提交一個 ajax 表單（form）是非常簡單的。當提交完成時使用者可以獲得響應資料。請注意，響應資料是來自伺服器的原始資料。對響應資料的解析動作要求獲得正確的資料。
例如，響應資料假設是 JSON 格式，一個典型的響應資料如下所示：
{
"success": true,
"message": "Message sent successfully."
}
現在在 'success' 回撥函式中處理 JSON 字串。
$('#ff').form('submit', {
success: function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message)
}
}
});方法
| 名稱 | 引數 | 描述 |
|---|---|---|
| destroy | none | 移除並銷燬該元件。 |
| validate | none | 進行驗證以判定文字框的內容是否有效。 |
| isValid | none | 呼叫 validate 方法並且返回驗證結果，true 或者 false。 |
| enableValidation | none | 啟用驗證。該方法自版本 1.3.4 起可用。 |
| disableValidation | none | 禁用驗證。該方法自版本 1.3.4 起可用。 |
login.html