正则校验onblur方法求指教

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<%@ 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>密&nbsp;码</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>

并不成功

爱动脑筋的小伙伴 2019-03-15

源自：Java正则表达式（老版） 3-2 前后台混合校验

收起

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>密&nbsp;码</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，并没有触发什么

收起回答

好帮手慕阿满 #1

同学你好， System.out.println("xx");这句代码是Java语句，不能在js中使用，这里同学可以换成alert("xx")；弹出框提示。另外应该学会看浏览器控制台，如果没有达到效果，看一下控制台是否报错。祝：学习愉快~

2019-03-15 18:47:04

好帮手慕阿满 2019-03-15 17:46:00

同学你好，可以在input中设置id，在js中通过id来获取输入的值，如：

1	`<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("用户名格式不正确");
        }
    }