您的位置:首页 > 产品设计 > UI/UE

easyui-textbox注册界面实现双重验证,用户名不能重复和正则

2017-08-24 16:14 369 查看
刚接触到easyui,对一些功能还不是很了解,下面附上实现的代码,以供大家参考!

基于jquery-easyui-1.4.2实现!

$.extend($.fn.validatebox.defaults.rules, {
username_isExist: {
validator: function (value) {
var existsUserName = $('#loginName').textbox('options').existsUserName;
if (existsUserName == null) {
return true;
} else {
return false;
}
},
message: '用户名已存在!'
},
loginName: {
validator: function(value,param){
//数字、字母、下划线,6-20长度
var t = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,7}$/;
//var t = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;只能含有汉字、数字、字母、下划线  长度并没有限制
return t.test(value);
},
message:'只能含有汉字、数字、字母、下划线,并且长度不能大于7位!'
}
});
$(function() {
$('#loginName').textbox({
onChange: function(newValue,oldValue) {
if (!newValue) {
$('#loginName').textbox('options').existsUserName = null;
$('#loginName').textbox('validate');
}

$.post('${pageContext.request.contextPath}/Login/doCheckName.do', {
'checkName' : newValue,
},function(msg) {
var b = msg.success;
if (b == true) {
$('#loginName').textbox('options').existsUserName = null;
} else {
$('#loginName').textbox('options').existsUserName = newValue;
}
//2中写法$(edPonbr.target).textbox('options').existsInvNo = (b ? null : newValue);
$('#loginName').textbox('validate');
}, 'JSON').error(function() {
});
}
});
});


body的内容,用户名实现双重验证!

<div id="dlg_user" class="easyui-dialog" style="width:320px;" data-options="closable : false,
title : '注册界面',
modal : true,
buttons : [ {
text : '注册',
handler : function() {
doRegister();
}
},{
text : '重置',
handler : function() {
doReset();
}
},{
text : '返回',
handler : function() {
doReturn();
}
}]">
<div style="padding:30px">
<form id="frm_register" method="POST" data-options="novalidate:true" action="${pageContext.request.contextPath}/Login/doRegister.do">
<table style='border-collapse: collapse; table-layout: fixed'>
<tr>
<td id="name">用户名:</td>
<td><input class="easyui-textbox" id="loginName" type="text" name="loginName" data-options="iconCls:'icon-man',required:true,validType:['loginName','username_isExist'],missingMessage:'请输入用户名'"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox" id="password" type="password" name="password" data-options="iconCls:'icon-lock',required:true,validType:'password',missingMessage:'请输入密码'"/></td>
</tr>
<tr>
<td>重复密码:</td>
<td><input class="easyui-textbox" id="rePassWord" type="password" name="rePassWord" data-options="iconCls:'icon-lock',required:true,validType:'equalTo[\'#password\']', invalidMessage:'再次输入的密码不一致', missingMessage:'请再输入一次密码'"/></td>
</tr>
</table>
</form>
</div>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: