jQuery&validate验证：同名用户和字符限制。

最新推荐文章于 2024-04-23 15:57:32 发布

最新推荐文章于 2024-04-23 15:57:32 发布 · 281 阅读

文章标签：

#用户名同名验证字符

Web开发同时被 3 个专栏收录

7 篇文章

订阅专栏

JSP

4 篇文章

订阅专栏

Java

3 篇文章

订阅专栏

本文介绍了一种在前端即时验证用户名是否已存在及限定用户名格式的方法。通过JSP页面、JavaScript进行前端验证，并使用Java后端逻辑实现用户名的数据库查询。此外，还介绍了如何限定用户名只能包含字母、数字和下划线。

工作中用到的，记录下来。新手一个，各位若有兴趣，可以留言讨论。

第一个：输入欲注册的用户名，即时验证该用户名是否存在。

一、JSP：

<form method="post" action="..." id="entpreg_stepfive">
	<label for="usercode">登录账户:</label>
	<input type="text" name="etp.userCode" id="usercode"/><span id="usercode_valid"></span>
</from>

二、JS：

$("#entpreg_stepfive").validate({
	rules:{
		'etp.userCode':{
			remote: {
				type: "post",
				url: "/powerSD/sdplat/etp/userCodeExist.action",
				data: {
					userCode: function() {
                            			return $("#etp.userCode").val();
					}
				},
				dataType: "html",
				dataFilter: function(data, type) {
					if (data == "true"){
						return true;
					}else{
						return false;
					}
				}
			}
		}
	},
	messages:{
		'etp.userCode':{
			remote: "用户名已被占用"
		}
	}
});

三、JAVA：

1）EtpManageAction.java

public void userCodeExist(){
	String sign = "false";
	String userCode = $("etp.userCode");
	if(this.getEtpManageService().userCodeExist(userCode)){ //即“2）”
		sign = "true";
	}
	super.renderText(sign); //开发框架的功能，可用“response.getWriter().print(sign)”代替
}

2）EtpManageServiceImpl.java

public boolean userCodeExist(String userCode){
	boolean sign = false;
	Map params = new HashMap();
	params.put("userCode", userCode);
	String userCodeS = this.ibatisDao.getString("etp-manage.findUserCodeForMap", params); //ibatis
	if(userCodeS == null){
		sign = true;
	}
	return sign;
}

3）sql-cust-manage.xml

<select id="findUserCodeForMap" parameterClass="hashMap" resultClass="String">
	select t.usercode
	from t_scm_cust_register t
	where t.userCode = #userCode#
</select>

----------------------------------------------------------------------------------------------------------------

第二个：限定用户名只可以是字母、数字和下划线

一、JSP：

<form method="post" action="..." id="entpreg_stepfive">
	<label for="usercode">登录账户:</label>
	<input type="text" name="etp.userCode" id="usercode"/><span id="usercode_valid"></span>
</from>

二、JS：

$(function(){
	jQuery.validator.addMethod("regex",
		function(value, element, params) {
			var exp = new RegExp(params);
			return exp.test(value);
		}, "格式错误");	
	$("#entpreg_stepfive").validate({
		rules:{
			'etp.userCode':{
				regex: "^\\w+$"
			}
		},
		messages:{
			'etp.userCode':{
				regex: "数字、字母或下划线"
			}
		}
	});
});

OVER！