<!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