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

EasyUi 手机号码,邮箱,remote验证

2016-01-15 09:46 459 查看
页面:

<form id="form2" style="padding:10px 20px 10px 40px;">

<p>
登录名: <input id="loginName2" class="easyui-textbox" name="loginName" data-options="required:true" validType="remote['<%=basePath%>/user/findbyloginname.do','loginName']"
missingMessage="登录名不能空" invalidMessage="用户名已存在" type="text" >
</p>
<p>
密码: <input id="password2" class="easyui-textbox" name="password" data-options="required:true"
missingMessage="密码不能空" type="password">
</p>
<p>
姓名: <input id="displayName2" class="easyui-textbox" name="displayName" data-options="required:true"
missingMessage="姓名不能空" type="text">
</p>
<p>
邮箱: <input id="email2" class="easyui-textbox" validType='email' name="email" data-options="required:true"
missingMessage="邮箱不能为空" invalidMessage="请输入正确的邮箱" type="text">
</p>
<p>
电话: <input id="contactPhone2" class="easyui-textbox" validType='phoneNum' name="contactPhone" data-options="required:true"
missingMessage="电话不能空" type="text">
</p>
<div>
<font size="3" style="">请选择角色:</font>
</div>
<br />
<div id="rolelistAdd1" style="height: 400"></div>
<!-- <br>
<div style="padding:5px;text-align:center;">
<a href="javascript:add()" class="easyui-linkbutton" icon="icon-ok">Ok</a>
<a href="javascript:Cancel()" class="easyui-linkbutton"
icon="icon-cancel">Cancel</a>
</div> -->
</form>
js代码:

$.extend($.fn.validatebox.defaults.rules, {
phoneNum: { //验证手机号
validator: function(value, param){
return /^1[3-8]+\d{9}$/.test(value);
},
message: '请输入正确的手机号码。'
},

telNum:{ //既验证手机号,又验证座机号
validator: function(value, param){
return /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\d3)|(\d{3}\-))?(1[358]\d{9})$)/.test(value);
},
message: '请输入正确的电话号码。'
}
});

表单提交

function add(){
var roleIds = [];
var roleIdAdd=$("#rolelistAdd").datagrid("getSelections");
for ( var i = 0; i < roleIdAdd.length; i++) {
roleIds.push(roleIdAdd[i].id);
}
$('#form2').form('submit',{
url:'<%=basePath%>/user/add.do',
method:'post',
onSubmit : function(param) {
param.roleIdAdd = roleIds;
return $("#form2").form('validate');
},
success : function(data) {

var data = eval('(' + data + ')');
if (data.result) {
$("#addWindow").dialog('close');
$("#user").datagrid('reload');
}
}
});
// submit the form

}

源码地址:https://github.com/LimxBoys/BaseJava

页面位置:BaseJava/src/main/webapp/views/limx/user.jsp
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  邮箱 手机 easyui jquery