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

最新推荐文章于 2019-05-10 08:47:07 发布

原创最新推荐文章于 2019-05-10 08:47:07 发布 · 1.4w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#邮箱 #手机 #easyui #jquery

web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个用户管理界面的设计与实现，包括登录名、密码等字段的验证逻辑及表单提交处理方式。展示了使用EasyUI进行输入验证的具体方法，并通过JavaScript实现了表单提交前的数据校验和角色选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面：

<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