正则校验onblur方法求指教
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>用户注册</h1>
<form action="<%=basePath %>/RegistServlet" method="post">
<table width="400px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td><input type="text" name="username" pattern="\\w{3,12}" required="required" placeholder="用户名为3-12位字母数字或下划线组合" onblur="checkUsername(this)"></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="password" pattern="\\d{6,12}" placeholder="密码长度为6-12位的纯数字" id="password" onblur="checkPassword(this)"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="checkPWD" pattern="\\d{6,12}" placeholder="密码长度为6-12位的纯数字" onblur="checkRePassword(this)"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" name="phone" pattern="[1][3578]\\d{9}" placeholder="请输入正确的手机号码格式" onblur="checkPhone(this)"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email" pattern="[a-zA-Z_0-9]{3,}@([a-zA-Z]+|\\d+)(\\.[a-zA-Z]+)+" placeholder="请输入正确邮箱格式" required="required" onblur="checkEmail(this)"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
<script type="text/javascript">
//用户名：
var usernameRegex = /^\w{3,12}$/;
//密码：
var passwordRegex = /^\d{6,12}$/;
//邮箱：
var emailRegex = /^[a-zA-Z_0-9]{3,}@([a-zA-Z]+|\\d+)(\\.[a-zA-Z]+)+$/;
//手机号码
var phoneRegex= /^[1][3578]\\d{9}$/;
//alert("222");
function validateForm(){ //定义validateForm方法用于客户端校验
var flag = true;
//校验用户名
var usernameNode = byName("username"); //获得ID值为username的节点对象
var username = usernameNode.value; //获得usernameNode节点的值，即用户在username文本框内填写的值
if(!usernameRegex.test(username)){ //验证获得到的值是否符合正则表达式
alert("用户名格式不正确");
}
//校验密码
var passwordNode = byName("password"); //获得ID值为password的节点对象
var password = passwordNode.value;
if(!passwordRegex.test(password)){
alert("密码格式不正确");
}
//确认密码
var rePasswordNode = byName("checkPWD"); //获得ID值为rePassword的节点对象
var rePassword = rePasswordNode.value;
if(!password==rePassword){
alert("密码不一致");
}
//校验邮箱
var emailNode = byName("email"); //获得ID值为Email的节点对象
var email = emailNode.value;
if(!emailRegex.test(email)){
alert("邮箱格式不正确");
}
function byName(name){ //自定义方法，用于获取传递过来的ID值对应的节点对象
return document.getElementByTagName(name);
}
function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验用户名
var username = node.value; //得到传递过来的节点对象的值
if(!usernameRegex.test(username)){ //验证是否符合节点对应的正则表达式
alert("用户名格式不正确");
}
}
function checkPassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验密码
var password1 = node.value;
//alert("111");
if (!passwordRegex.test(password)) {
alert("密码格式不正确");
}
}
function checkRePassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//确认密码
var rePassword = node.value;
var password = byName("password").value;
//alert(repassword+"***"+password);
if(password!=rePassword){
alert("密码不一致");
}
}
function checkPhone(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//确认密码
var phone = node.value;
//alert(repassword+"***"+password);
if(!phoneRegex.test(phone)){
alert("电话格式不正确");
}
}
function checkEmail(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验邮箱
var email = node.value;
if(!emailRegex.test(email)){
alert("邮箱格式不正确");
}
}
</script>
</body>
</html>并不成功
0
收起
正在回答 回答被采纳积分+1
2回答
爱动脑筋的小伙伴
2019-03-15 17:52:37
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>用户注册</h1>
<form action="<%=basePath %>/RegistServlet" method="post">
<table width="400px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" pattern="\\w{3,12}" required="required" placeholder="用户名为3-12位字母数字或下划线组合" onblur="checkUsername()"></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="password" pattern="\\d{6,12}" placeholder="密码长度为6-12位的纯数字" id="password" onblur="checkPassword(this)"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="checkPWD" pattern="\\d{6,12}" placeholder="密码长度为6-12位的纯数字" onblur="checkRePassword(this)"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" name="phone" pattern="[1][3578]\\d{9}" placeholder="请输入正确的手机号码格式" onblur="checkPhone(this)"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email" pattern="[a-zA-Z_0-9]{3,}@([a-zA-Z]+|\\d+)(\\.[a-zA-Z]+)+" placeholder="请输入正确邮箱格式" required="required" onblur="checkEmail(this)"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
<script type="text/javascript">
//用户名：
var usernameRegex = /^[a-zA-Z_0-9]{3,12}$/;//\w{3,12}$/;
//密码：
var passwordRegex = /^\d{6,12}$/;
//邮箱：
var emailRegex = /^[a-zA-Z_0-9]{3,}@([a-zA-Z]+|\\d+)(\\.[a-zA-Z]+)+$/;
//手机号码
var phoneRegex= /^[1][3578]\\d{9}$/;
function byId(id){ //自定义方法，用于获取传递过来的ID值对应的节点对象
return document.getElementById(id);
}
function checkUsername(){
System.out.println("xx");
var username=byId("username").value;
if(!usernameRegex.test(username)){ //验证获得到的值是否符合正则表达式
window.alert("用户名格式不正确");
System.out.println("xx");
}
}
</script>
</body>
</html>只测试username，并没有触发什么
好帮手慕阿满
2019-03-15 17:46:00
同学你好，可以在input中设置id，在js中通过id来获取输入的值，如：
<td><input type="text" id="username" name="username" pattern="\\w{3,12}" required="required" placeholder="用户名为3-12位字母数字或下划线组合" onblur="checkUsername()"></td>checkUsername()函数这样写：
function checkUsername(){
//校验用户名
var username=document.getElementById("username").value;
if(!usernameRegex.test(username)){
alert("用户名格式不正确");
}
}这样即可校验用户名的格式。建议同学先注释其他的，一个一个来完成校验，这个可以了，再校验下一个。使用同学的代码验证，在浏览器的控制台会报很多的错，建议同学一个一个来。
祝：学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星