`
zfy421
  • 浏览: 230807 次
社区版块
存档分类
最新评论

javascript-表单验证

阅读更多

一个基于javascript的简单表单验证程序,部分细节没有完善。

html部分代码:

<form action="regeist" method="post" id="form1">
    	用户名:<input type="text" name="username" id="username" onblur="checkname()">
    	<br/>
    	密码:<input type="password" name="password" id="password"><br/>
    	确认密码:<input type="password" name="repassword" id="repassword"><br/>
    	邮箱:<input type="text" name="email" id="email"><br/>
    	手机号码:<input type="text" name="mobile" id="mobile"><br/>
    	出生日期:<input type="text" name="birthday" id="birthday"><br/>
    	<input type="button" value="ok" onclick="mysubmit()">
    	<input type="reset" value="reset">
    </form>

 js代码主要使用javascript进行验证,username属性使用jquery进行查询用户名是否存在,这里只是简单的匹配,也可以调用数据库查询。

<script type="text/javascript" src="jquery-1.5.2.js"></script>
    <script type="text/javascript">
    	function mysubmit(){
        	if(check()){
            	alert("mainok");
				document.getElementById("form1").submit();
        	}
        }
        function check(){
        	var username=document.getElementById("username").value;
        	var password=document.getElementById("password").value;
        	var repassword=document.getElementById("repassword").value;
        	var email=document.getElementById("email").value;
        	var mobile=document.getElementById("mobile").value;
        	var birthday=document.getElementById("birthday").value;
        	if(username==null||username==""){
        		alert("用户名不能为空");
        		document.getElementById("username").focus();
        		return false;
            }
			if(username.length<5){
				alert("用户名长度为5-20个字符");
				document.getElementById("username").focus();
				return false;
			}
			if(password==null||password==""){
        		alert("密码不能为空");
        		document.getElementById("password").focus();
        		return false;
            }
            if(password.length<6||password.length>20){
            	alert("密码长度为6-20个字符");
            	document.getElementById("password").focus();
            	return false;
            }
            if(password!=repassword){
                alert("密码不一致");
                document.getElementById("password").focus();
                return false;
            }
            if(email==null||email==""){
                alert("邮箱不能为空");
                document.getElementById("email").focus();
                return false;
            }
            if(email.indexOf("@")==-1){
            	alert("邮箱格式错误");
                document.getElementById("email").focus();
                return false;
            }
            var str=/^1[3|4|5|8][0-9]\d{8}$/;
            if(mobile!=null&&mobile!=""){
	            if(!str.test(mobile)){
	                alert("手机格式错误");
	                document.getElementById("mobile").focus();
	                return false;
	            }
            }
            
			return true;
        }
        function checkname(){
        	var username=document.getElementById("username").value;
        	$.ajax({
				type:"post",
				url:"checkname",
				data:{
					username:username
				},
				success:function(data){
					//alert(data);
					if(data=="true"){
						document.getElementById("username").focus();
						alert("用户存在");
						return false;
					}
				}
			})
        }
    </script>
 public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String username=request.getParameter("username");
		System.out.println(username);
		if(username.equals("zfy123")){
			out.print("true");
		}else{
			out.print("false");
		}
	}
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics