页面分析 EasyUI的form表单的一个自由的校验开启

<!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 起可用。

页面分析 EasyUI的form表单的一个自由的校验开启

用法

处理提交响应

方法

猜你喜欢