前台jsp校验:js+Ajax+正则表达式--【DRP】
2015-12-01 10:53
525 查看
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import ="com.bjpowernode.drp.sysmgr.domain.*"%>
<%@ page import="com.bjpowernode.drp.sysmgr.manager.*"%>
<%
request.setCharacterEncoding("GB18030");
//查询用户Id,并判断数据库中是否存
String command=request.getParameter("command");
String userId="";
String userName="";
String contactTel="";
String email="";
if("add".equals(command)){
if(UserManager.getInstance().findUserById(request.getParameter("userId"))==null){
User user=new User();
user.setUserId(request.getParameter("userId"));
user.setUserName(request.getParameter("userName"));
user.setPassword(request.getParameter("password"));
user.setContactTel(request.getParameter("contactTel"));
user.setEmail(request.getParameter("email"));
UserManager.getInstance().addUser(user);
out.println("添加用户成功！");
}else{
userId=request.getParameter("userId");
userName=request.getParameter("userName");
contactTel=request.getParameter("contactTel");
email=request.getParameter("email");
out.println("添加代码已经存在，代码=【"+ request.getParameter("userId") +"】");
}
};
//String command=request.getParameter("command");
//if(command !=null && command.equals("add")){
/* if("add".equals(command)){
User user=new User();
user.setUserId(request.getParameter("userId"));
user.setUserName(request.getParameter("userName"));
user.setPassword(request.getParameter("password"));
user.setContactTel(request.getParameter("contactTel"));
user.setEmail(request.getParameter("email"));
UserManager.getInstance().addUser(user);
out.println("添加用户成功！");
} */
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>添加用户</title>
<link rel="stylesheet" href="../style/drp.css">
<script src="../script/client_validate.js"></script>
<script type="text/javascript">
//返回
function goBack() {
window.self.location="user_maint.html"
}
//添加用户前的js判断
function addUser() {
//var vUserId=document.getElementById("userId").value;
var userIdField=document.getElementById("userId");
//用户代码不能为空
//判断用户代码不能为空
if(trim(userIdField.value)==""){
alert("用户代码不能为空！");
userIdField.focus();
return;
}
/*
//用户代码只能为4-6位！
if(!(trim(userIdField.value).length>=4 && trim(userIdField.value).length<=6)){
alert("用户代码只能为4-6位！！");
userIdField.focus();
return;
}
for(var i=0;i<trim(userIdField.value).length;i++){
var c=trim(userIdField.value).charAt(i);
if(!(c>='0' && c<='9') || ( c>='z' && c<='Z') || (c>='A' || c<='Z')){
alert("用户代码必须为数字和字母！");
userIdField.focus();
return;
}
}
*/
//用户代码必须为数字和字母！只能为4-6位,从头至尾
var re=new RegExp(/^[a-zA-Z0-9]{4,6}$/);
if(!re.test(trim(userIdField.value))){
alert("用户代码必须为数字和字母！只能为4-6位！");
userIdField.focus();
return;
}
//用户名称必须输入，不能和用户代码不能为空一致
if(trim(document.getElementById("userName").value).length==0){
alert("用户名称不能为空！");
document.getElementById("userName").focus();
return;
}
//密码至少6位
if(trim(document.getElementById("password").value).length<6){
alert("密码至少6位!");
document.getElementById("password").focus();
return;
}
//如果联系电话不为空，进行判断，判断规则：都为数字，采用两种方式1，正则表达式 2，不用
//不采用正则表达式判断
var contactTelField=document.getElementById("contactTel");
/*
//alert("a"+trim(contactTelField.value)+"a");
if(trim(contactTelField.value)!=""){
for(var i=0;i<trim(contactTelField.value).length;i++){
var c=trim(contactTelField.value).charAt(i);
alert(c);
if(!(c>='0' && c<='9')){
alert("电话号码不合法");
contactTelField.focus();
return;
}
}
}
*/
//正则表达式验证是否为数字--王美--2015年11月24日
/* var reg=new RegExp("^[0-9]*$");
var obj=document.getElementById("contactTel");
if(!reg.test(obj.value)){
alert("请输入数字！");
}
if(!/^[0-9]*$/.test(obj.value)){
alert("请输入数字！");
}
*/
//正则表达式验证是否为数字，DRP视频里面的
if(trim(contactTelField.value)!=""){
//方法用于在脚本执行过程中编译正则表达式。
re.compile(/^[0-9]*$/);
if(!re.test(trim(contactTelField.value))){
alert("电话号码不合法！");
contactTelField.focus();
return;
}
}
//如果email不能空，进行判断，判断规则；只要包含@即可，@最好不再最前面和最后面。
var emailField=document.getElementById("email");
if(trim(emailField.value).length !=0){
var emailValue=trim(emailField.value);
if((emailValue.indexOf("@")==0) || (emailValue.indexOf("@")== (emailValue.length-1))){
alert("email地址格式不正确！");
emailField.focus();
return;
}
if(emailValue.indexOf("@")<0){
alert("email地址格式不正确！");
emailField.focus();
return;
}
}
if(document.getElementById("spanUserId").innerHTML!=null){
alert("用户代码已经存在！");
userIdField.focus();
return;
}
/*
document.getElementById("userForm").action="user_add.jsp";
document.getElementById("userForm").method="post";
document.getElementById("userForm").submit();
*/
with(document.getElementById("userForm")){
action="user_add.jsp";
method="post";
submit();
}
}
function init(){
//用户代码text获取焦点
document.getElementById("userId").focus();
}
function userIdOnKeyPress(){
//只能输入字母，不能输入数字
if(!(event.keyCode>=97 && event.keyCode<=122)){
event.keyCode=0;
}
}
//回车换行
/* function document.onkeydown(){
alert(window.event.keyCode);
if(window.event.keyCode==13 && window.event.srcElement.type !='button'){
window.event.keyCode=9;
}
} */
//1.创建Ajax核心对象XMLHttpRequest
var xmlHttp;
function createXMLHttpRequest(){
//表示当前浏览器不是ie,如firefox
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//2.创建Ajax对象，完成用户代码的判断
function validate(field){
//alert(document.getElementById("userId").value);
//alert(field.value);
if(trim(field.value).length !=0){
//创建Ajax核心对象XMLHttpRequest
createXMLHttpRequest();
//添加一个时间，就不会读取过期缓存了
var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
//设置请求方式为get,请求的url,异步提交
xmlHttp.open("GET",url,true);
//将方法的地址赋值给onreadystatechange属性
xmlHttp.onreadystatechange=callback;
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}else{
document.getElementById("spanUserId").innerHTML="";
}
}
function callback(){
//alert(xmlHttp.readyState);
//设置Ajax引擎状态为成功
if (xmlHttp.readyState==4){
//Http协议状态为成功
if(xmlHttp.status==200){
//取得相应文本
//alert(xmlHttp.responseText);
if(trim(xmlHttp.responseText)!=""){
document.getElementById("spanUserId").innerHTML="<font color='red'>"+ xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("请求失败，错误码="+xmlHttp.status);
}
}
}
</script>
</head>
<body class="body1" onload="init()">
<form name="userForm" target="_self" id="userForm">
<input type="hidden" name="command" value="add">
<div align="center">
<table width="95%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>
</td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="0"
height="25">
<tr>
<td width="522" class="p1" height="25" nowrap>
<img src="../images/mark_arrow_03.gif" width="14" height="14">
<b>系统管理>>用户维护>>添加</b>
</td>
</tr>
</table>
<hr width="97%" align="center" size=0>
<table width="95%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="22%" height="29">
<div align="right">
<font color="#FF0000">*</font>用户代码:
</div>
</td>
<td width="78%">
<input name="userId" type="text" class="text1" id="userId"
size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId%>" onblur="validate(this)">
<span id="spanUserId"></span>
</td>
</tr>
<tr>
<td height="26">
<div align="right">
<font color="#FF0000">*</font>用户名称:
</div>
</td>
<td>
<input name="userName" type="text" class="text1" id="userName"
size="20" maxlength="20" value="<%=userName%>">
</td>
</tr>
<tr>
<td height="26">
<div align="right">
<font color="#FF0000">*</font>密码:
</div>
</td>
<td>
<label>
<input name="password" type="password" class="text1"
id="password" size="20" maxlength="20">
</label>
</td>
</tr>
<tr>
<td height="26">
<div align="right">
联系电话:
</div>
</td>
<td>
<input name="contactTel" type="text" class="text1"
id="contactTel" size="20" maxlength="20" value="<%=contactTel%>">
</td>
</tr>
<tr>
<td height="26">
<div align="right">
email:
</div>
</td>
<td>
<input name="email" type="text" class="text1" id="email"
size="20" maxlength="20" value="<%=email%>">
</td>
</tr>
</table>
<hr width="97%" align="center" size=0>
<div align="center">
<input name="btnAdd" class="button1" type="button" id="btnAdd"
value="添加" onClick="addUser()">
<input name="btnBack" class="button1" type="button" id="btnBack"
value="返回" onClick="goBack()" />
</div>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript保留关键字（全）
- Javascript操作DOM常用API总结
- jsp九大内置对象详解
- Js计算指定日期加上多少天、加多少月、加多少年的日期
- js获取及判断键盘按键的方法
- JavaScript获取Select下拉框Option的Value和Text值的方法
- VS中快速生成json数据格式对应的实体
- JavaScript 字符串(String)对象与Date（日期）对象
- JS实现递归要注意的问题
- JS练习题①：求字符串中出现次数最多的字母和出现次数
- 关于使用newtonsoft 解析json字符串，即是将json字符串转换成json对象的写法
- javascript 闭包
- JS验证邮件地址格式方法小结
- 基于JavaScript操作DOM常用的API小结
- javaScript 计算网页的高与宽
- 常见JS验证脚本汇总
- JavaScript 函数和变量声明的"提前"(hoist)行为
- Sencha Extjs4.2 皮肤制作
- 详解JavaScript函数
- javascript定义类和类的实现实例详解