06-EasyUI_使用控件ValidateBox验证表单域
使用控件ValidateBox验证表单域
源码下载: EasyUI_04.zip
步骤:
验证规则为: 必填
注: 必须 基于Form组件, 即必须使用Form组件的validate()方法验证
提交之前(form.submit),会自动调用 Form的validate的方法
如果 验证不通过, 则不提交. 同时 给出提示 和获取焦点
截图: 1.jpg
missingMessage 不填时的提示信息
invalidMessage 填入的内容非法时的提示信息
Validate Rule
The validate rule is defined by using required and validType property,
here are the rules already implemented:
email: Match email regex rule.
url: Match URL regex rule.
length[0,100]: Between x and x characters allowed.
原理:
给每个input绑定点击事件,
如果点击的是回车则调用submit方法(默认会先调用validate方法)
源码下载: EasyUI_04.zip
步骤:
1. 使用 class的方式将 validatebox绑定到<input>
验证规则为: 必填
<input name="name" type="text"
class="easyui-validatebox"
required="true"
/>
注: 必须 基于Form组件, 即必须使用Form组件的validate()方法验证
2. 点击提交
提交之前(form.submit),会自动调用 Form的validate的方法
如果 验证不通过, 则不提交. 同时 给出提示 和获取焦点
截图: 1.jpg
3. missingMessage 和 invalidMessage
missingMessage 不填时的提示信息
invalidMessage 填入的内容非法时的提示信息
4. 使用 validType 指定内置的验证规则
Validate Rule
The validate rule is defined by using required and validType property,
here are the rules already implemented:
email: Match email regex rule.
url: Match URL regex rule.
length[0,100]: Between x and x characters allowed.
5. 扩展验证规则, param参数的使用
1) 至少n个字符
<input name="password" type="password" class="easyui-validatebox" required=true validType="minLength[3]"/>
$.extend($.fn.validatebox.defaults.rules, {
// 不少于 n 个字符
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: '至少 {0} 个字符.'
}
});
注: param --> [3] , param就是一个json数组
2) 两次密码要一致
<input name="rePassword" type="password" class="easyui-validatebox" required=true validType="equalPwd['#loginInputForm input[name=password]']"/>传个字符串过去, 该字符串加上 $() 即可定位上一个 password的input
$.extend($.fn.validatebox.defaults.rules, {
// 两次密码一致
equalPwd: {
validator: function(value, param){
return value == $(param[0]).val();
},
message: '两次密码不一致.'
}
});
6. 按回车提交表单
原理:
给每个input绑定点击事件,
如果点击的是回车则调用submit方法(默认会先调用validate方法)
// 点击回车提交(验证所有规则)
loginInputForm.find("input").on('keyup', function(event){
if (event.keyCode == '13') {
loginInputForm.submit();
}
});
7. 隐藏的注册界面(补充)
<!-- 注册的首先隐藏 --> <div id="regDialog" style="display:none; width:250px;"> <form id="regForm" method="post"> <table> <tr> <th>用户名</th> <!-- <td><input name="name" type="text"/></td> --> <td> <input name="name" type="text" class="easyui-validatebox" required="true" /> </td> </tr> <tr> <th>密码</th> <td> <input name="password" type="password" class="easyui-validatebox" required=true validType="minLength[3]"/> </td> </tr> <tr> <th>重复密码</th> <td> <input name="rePassword" type="password" class="easyui-validatebox" required=true validType="equalPwd['#regForm input[name=password]']"/> </td> </tr> </table> </form> </div>
// 注册界面
// show() 为jQuery的方法,将隐藏的div显示出来
regDialog = $("#regDialog").show().dialog({
modal: true,
title : "注册",
closed : true,
buttons : [{
text : "注册",
handler : function() {
regForm.submit();
//alert("点击了注册按钮");
}
}],
onOpen : function() {
setTimeout(function() {
regForm.find("input[name=name]").focus();
}, 1);
},
onClose : function() {
//loginTabs.tabs("select", 0);
}
});
8. 完整网页源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>login</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<!--
使用控件ValidateBox验证表单域
步骤:
1. 使用 class的方式将 validatebox绑定到<input>
验证规则为: 必填
<input name="name" type="text"
class="easyui-validatebox"
required="true"
/>
注: 必须 基于Form组件, 即必须使用Form组件的validate()方法验证
2. 点击提交
提交之前(form.submit),会自动调用 Form的validate的方法
如果 验证不通过, 则不提交. 同时 给出提示 和获取焦点
截图: 1.jpg
3. missingMessage 和 invalidMessage
missingMessage 不填时的提示信息
invalidMessage 填入的内容非法时的提示信息
4. 使用 validType 指定内置的验证规则
Validate Rule
The validate rule is defined by using required and validType property,
here are the rules already implemented:
email: Match email regex rule.
url: Match URL regex rule.
length[0,100]: Between x and x characters allowed.
5. 扩展验证规则, param参数的使用
1) 至少n个字符
2) 两次密码要一致
6. 按回车提交表单
原理:
给每个input绑定点击事件,
如果点击的是回车则调用submit方法(默认会先调用validate方法)
-->
<script type="text/javascript">
// 获取项目的URL
function getCurProjPath() {
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
//console.info(getCurProjPath());
</script>
<script type="text/javascript" charset="UTF-8">
var loginAndRegDialog;
var loginInputForm;
var regDialog;
var regForm;
$(function() {
loginAndRegDialog = $("#loginAndRegDialog");
// 将div渲染程dialog
loginAndRegDialog.dialog({
closable : false,
modal : true,
buttons : [ {
text : '注册',
handler : function() {
regDialog.dialog("open");
// 错开两个dialog
}
}, {
text : '登陆',
handler : function() {
// 提交Form
loginInputForm.submit();
}
} ]
});
// 渲染Form
loginInputForm = $("#loginInputForm").form({
url:"userLoginServlet",
success:function(data){
console.info(data);
// 注意 data为json格式的字符串,需要转换
data = $.parseJSON(data);
console.info(data);
if (data && data.success) { // 成功, 隐藏dialog
loginAndRegDialog.dialog('close');
$.messager.show({
title : "提示",
msg : data.msg,
timeout:2000,
});
} else { // 失败, 弹 对话框
$.messager.alert('标题',data.msg);
}
}
});
// ValidateBox, 扩展验证规则
$.extend($.fn.validatebox.defaults.rules, {
// 不少于 n 个字符
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: '至少 {0} 个字符.'
},
// 两次密码一致
equalPwd: {
validator: function(value, param){
return value == $(param[0]).val();
},
message: '两次密码不一致.'
}
});
// 点击回车提交(验证所有规则)
loginInputForm.find("input").on('keyup', function(event){
if (event.keyCode == '13') {
loginInputForm.submit();
}
});
// 注册表单
regForm = $("#regForm").form({
url:"userRegServlet",
success:function(data){
console.info(data);
// 注意 data为json格式的字符串,需要转换
data = $.parseJSON(data);
console.info(data);
if (data && data.success) { // 成功, 隐藏dialog
regDialog.dialog('close');
$.messager.show({
title : "提示",
msg : data.msg,
timeout:2000,
});
} else { // 失败, 弹 对话框
$.messager.alert('标题',data.msg);
}
}
});
// 注册界面
// show() 为jQuery的方法,将隐藏的div显示出来
regDialog = $("#regDialog").show().dialog({
modal: true,
title : "注册",
closed : true,
buttons : [{
text : "注册",
handler : function() {
regForm.submit();
//alert("点击了注册按钮");
}
}],
onOpen : function() {
setTimeout(function() {
regForm.find("input[name=name]").focus();
}, 1);
},
onClose : function() {
//loginTabs.tabs("select", 0);
}
});
});
</script>
<style type="text/css">
/* 标签居右 */
th{
text-align: right;
}
</style>
</head>
<body>
<!-- 注册的首先隐藏 -->
<div id="regDialog" style="display:none; width:250px;">
<form id="regForm" method="post">
<table>
<tr>
<th>用户名</th>
<!--
<td><input name="name" type="text"/></td>
-->
<td>
<input name="name" type="text"
class="easyui-validatebox"
required="true"
/>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input name="password" type="password"
class="easyui-validatebox"
required=true
validType="minLength[3]"/>
</td>
</tr>
<tr>
<th>重复密码</th>
<td>
<input name="rePassword" type="password"
class="easyui-validatebox"
required=true
validType="equalPwd['#regForm input[name=password]']"/>
</td>
</tr>
</table>
</form>
</div>
<div id="loginAndRegDialog"
title="用户登陆"
style="width:260px;height:160px;"
>
<form id="loginInputForm" method="post">
<table style="text-align:center;">
<tr>
<th>用户名</th>
<!--
<td><input name="name" type="text"/></td>
-->
<td>
<input name="name" type="text"
class="easyui-validatebox"
required="true"
/>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input name="password" type="password"
class="easyui-validatebox"
required=true
validType="minLength[3]"/>
</td>
</tr>
<!--
<tr>
<th>重复密码</th>
<td>
<input name="rePassword" type="password"
class="easyui-validatebox"
required=true
validType="equalPwd['#loginInputForm input[name=password]']"/>
</td>
</tr>
-->
</table>
</form>
</div>
</body>
</html>