其实写服务器和写客户端是一样的,除了技术的支持最重要的还是对业务流程的熟悉!当然在客户端更多的是对用户动作和事件的清晰,下面就是一个用户更新个人资料的简单验证.
<script language="javascript" type="text/javascript">
hostURl ="<%=base%>";
//客户端检查基本的邮箱信息
function checkClientEmail(userEmail){
var emailReg = new RegExp("^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$");
if(userEmail.trim()==""){
$("#emailTip").html("<font color='red'>請輸入郵箱</font>");
$("#userEmail").focus();
return false;
}else{
if(emailReg.test(userEmail)){
$("#emailTip").html("");
return true;
}else{
$("#emailTip").html("<font color='red'>請正确輸入郵箱</font>");
$("#userEmail").focus();
return false;
}
}
}
//服务器端检查该邮箱是否存在
function checkServerEmail(userEmail){
var isServerExisted=true;
$.ajax( {
url : hostURl + '/user/checkEmail.action',
type : "post",
data : {
email : userEmail
},
dataType : 'text',
error : function() {
$("#emailTip").html("<font color='red'>請求出錯,請稍後再試</font>");
$("#userEmail").focus();
},
success : function(data) {
var ret = eval("(" + data + ")");
if (ret.msg == "success") {
isServerExisted=false;
$("#userEmail").attr("class","unchangeable").attr("readonly","readonly");
$("#emailTip").html("<font color='green'>該郵箱可以使用</font>");
}else {
$("#emailTip").html("<font color='red'>該郵箱已經存在,請輸入其它郵箱</font>");
$("#userEmail").focus();
}
}
});
return isServerExisted;
}
//当邮箱检查通过后检查其它字段信息
function submitUserInfoByCheck(){
//普通字段
var userId=$("#userId").val().trim();
var userRealName=$("#userRealName").val().trim();
var userGender=$("input[name='user.gender']:checked").val();
var userInterest=$("#userInterest").val().trim();
var userAddress=$("#userAddress").val().trim();
var userEmail=$("#userEmail").val().trim();
var userPhone=$("#userPhone").val().trim();
//必须的字段
var userPassword=$("#userPassword").val().trim();
var userScreenName=$("#userScreenName").val().trim();
//单独提取出来的日期类型的生日
var userBirthday=$("#userBirthday").val().trim();
if(userScreenName=="") {
$("#screenNameTip").html("<font color='red'>請輸入昵稱后再提交</font>");
$("#userScreenName").focus();
return false;
}
if(userPassword==""){
$("#userPasswordTip").html("<font color='red'>請輸入密碼后再提交</font>");
$("#userPassword").focus();
return false;
}else if(userPassword.length <6) {
$("#userPasswordTip").html("<font color='red'>輸入的密碼長度不能小於6位</font>");
$("#userPassword").focus();
return false;
}
//封装user对象属相让struts自动填充,让birthday单独处理
var userAttrs="user.id="+userId+"&user.name="+userRealName+"&user.userName="+userScreenName+"&user.gender="
+userGender+"&user.interest="+userInterest+"&user.address="+userAddress+"&user.email="+userEmail
+"&user.phone="+userPhone+"&user.password="+userPassword;
$.ajax( {
url : hostURl + '/userCenter/updateUserselfModifyInfo!updateUserselfModifyInfo.action?'+userAttrs,
type : "post",
data : {
userBirthday : userBirthday
},
dataType : 'json',
error : function() {
alert("抱歉,服務器忙,請您稍後再試!");
},
success : function(data) {
if (data.status) {
alert("修改信息成功");
window.location.href = hostURl + "/userCenter/diplayUserInfo!getUserInfo.action";
}else {
alert("抱歉,服務器忙,請您稍後再試!");
}
}
});
}
//基本信息验证结束后就提交
function updateUserInfo(){
var isClientChecked;
var isServerExisted;
var emailType=$("#userEmail").attr("class");
if(emailType=="changeable"){
var userEmail=$("#userEmail").val().trim();
isClientChecked=checkClientEmail(userEmail);
if(isClientChecked){
isServerExisted=checkServerEmail(userEmail);
if(!isServerExisted){
submitUserInfoByCheck();
}
}
}else{
submitUserInfoByCheck();
}
}
</script>
<div>
<h2>基本資料</h2>
<input id="userId" type="hidden" name="user.id" value="${user.id}" />
<ul>
<li>姓 名:<input id="userRealName" type="text" name="user.name" value="${user.name}" /></li>
<li>昵 稱:<input id="userScreenName" type="text" name="user.userName" value="${user.userName}" /> <font color="red">*</font></li>
<li style="margin-left: 30px;" id="screenNameTip"></li>
<li>密 碼:<input id="userPassword" type="password" name="user.password" value="${user.password}" /> <font color="red">*</font></li>
<li style="margin-left: 30px;" id="userPasswordTip"></li>
<s:if test="user.gender==1">
<li>性 别: <input type="radio" name="user.gender" value="1" checked="checked" />男
<input type="radio" name="user.gender" value="2" />女
<input type="radio" name="user.gender" value="0" />不公開
</li>
</s:if>
<s:elseif test="user.gender==2">
<li>性 别:<input type="radio" name="user.gender" value="1" />男
<input type="radio" name="user.gender" value="2" checked="checked" />女
<input type="radio" name="user.gender" value="0" />不公開
</li>
</s:elseif>
<s:else>
<li>性 别: <input type="radio" name="user.gender" value="1" />男
<input type="radio" name="user.gender" value="2" />女
<input type="radio" name="user.gender" value="0" checked="checked" />不公開
</li>
</s:else>
<li>生 日:<input id="userBirthday" type="text" name="user.birthday" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"
value="<s:date name="user.birthday" format="yyyy-MM-dd" />" />
</li>
<li>興 趣:<input id="userInterest" type="text" name="user.interest" value="${user.interest}" /></li>
</ul>
</div>
服务器端的处理
/**
* 将用户生日单独提取出来,<BR>
* 因为之前在本地使用struts自动封装没有问题,但是在远程服务器上总是报错<BR>
* 现在的做法就是让其它字段自动封装,而生日单独提取出来<BR>
* */
public String updateUserselfModifyInfo() {
JSONObject resJson = new JSONObject();
String userBirthday = super.getRequest().getParameter("userBirthday");
Date birthday = null;
if (userBirthday != null && userBirthday.length() > 0)
birthday = dateUtil.parseStringToDate(userBirthday, "yyyy-MM-dd");
user.setBirthday(birthday);
String updateStatus = userService.updateUserselfModifyInfo(user);
if (updateStatus == null) {
resJson.put("status", true);
user = userService.getUserInfoById(user.getId());
super.getRequest().getSession().setAttribute(
CommonConstants.SESSION_USER, user);
} else
resJson.put("status", false);
super.ajaxJson(resJson.toString());
return null;
}
分享到:
相关推荐
JS验证代码大全是汇集了多种JavaScript验证技术的资源集合,可以帮助开发者在创建网页表单、验证用户输入等方面提供有效的解决方案。 一、表单验证基础 在网页开发中,表单验证是非常重要的一环,它能够确保用户...
本文将详细介绍一种JavaScript验证数字的方法,并通过具体的代码示例来解释其实现原理。 #### 二、需求分析 根据题目提供的信息,我们需要实现一个功能:验证用户输入的文本框中的值是否为长度为6位的纯数字。具体...
JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够直接在客户端运行,无需...通过深入研究`pubcheck.js`的源代码,我们可以学习到更多关于JavaScript验证策略和实现方式的知识。
"js验证大全"是一个集合了多种JavaScript验证技术和特效的资源包,对于程序员来说,它是一个非常宝贵的参考资料。 首先,我们来看一下这个压缩包中包含的文件: 1. **Default.aspx**:这是一个ASP.NET网页文件,...
JavaScript,简称JS,是网页开发中不可或缺的一部分,主要用于实现客户端的交互逻辑和增强用户体验。本篇文章将深入探讨三个关键知识点:JS表单验证、JS导出Excel以及JS验证。 一、JS表单验证 在Web应用程序中,...
JavaScript验证框架是Web开发中常用的一种工具,它用于在客户端对用户输入的数据进行实时检查,以确保数据的有效性和合规性,从而减少服务器端的压力并提供更好的用户体验。本项目提供的"js验证框架"是一个轻量级的...
总结,这个"js 验证 自定义 类"框架旨在提供一种高效、灵活和可扩展的JavaScript验证解决方案。通过其内置的基本验证功能和自定义规则的能力,开发者可以轻松应对各种数据验证需求,同时保持良好的用户体验。结合...
### JS验证方法大全 在Web开发中,JavaScript(简称JS)是一种非常重要的客户端脚本语言,广泛用于网页交互效果的实现。其中,数据验证是非常关键的一环,它可以帮助开发者确保用户输入的数据符合预期的格式或者...
在JavaScript(JS)中,验证错误信息是网页前端开发中不可或缺的部分。这通常涉及到用户输入数据的检查,确保数据的有效性和安全性。"js验证错误信息.rar" 包含的资源显然是一个封装了验证功能的JS类,适用于文本框...
根据给定文件的信息,本文将详细介绍如何使用JavaScript(简称JS)进行输入验证,具体包括三种情况:一是确保用户只能输入数字;二是确保用户输入的是字母、数字或下划线;三是验证固定电话号码的格式是否正确。这三...
在Web开发中,JavaScript验证扮演着至关重要的角色,它能够提高用户体验,减少服务器负担,防止无效或错误的数据提交。本文将深入探讨JavaScript验证的各种方法和应用场景。 1. **基础验证** - **非空验证**:检查...
总之,JavaScript验证在密码修改过程中扮演着至关重要的角色,它可以确保用户输入的数据满足特定的安全标准,从而提高整个系统的安全性。正确实现和使用这些验证技术,对于创建一个用户友好且安全的Web应用至关重要...
在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于处理用户交互,其中之一就是验证用户在表单中输入的数据格式。表单验证能够确保用户提交的信息符合预设的标准,例如正确的电话号码、...
js验证居民身份证,就这么简单,你懂得~
3. ComboBoxCheckTree.js:这是主要的JavaScript文件,很可能包含了ComboBoxCheckTree组件的逻辑代码,包括数据加载、用户交互处理、验证功能等。 4. treedata.js:这是一个可能存储树形数据的文件,数据可能以JSON...
总结来说,本文所列出的JavaScript验证和函数汇总,对于前端开发人员在处理数值和验证输入时提供了有价值的工具,不仅减少了重复编写验证代码的工作量,还确保了数据处理的准确性,提高开发效率和代码质量。...
**JavaScript验证**在Web开发中扮演着重要角色,主要用于确保用户在表单中输入的数据符合特定格式或规则,例如检查邮箱格式、手机号码合法性、密码强度等。在没有服务器端验证的情况下,JavaScript验证能提供即时...
JavaScript验证主要分为客户端验证和服务器端验证。客户端验证通常通过JavaScript在用户提交表单前进行,可以实时反馈错误信息,减少不必要的服务器请求,提高响应速度。而服务器端验证则是为了防止恶意用户绕过...