表单验证validate和onsubmit同时存在

最新推荐文章于 2019-05-05 02:11:03 发布

maojd

最新推荐文章于 2019-05-05 02:11:03 发布

阅读量2.9k

点赞数

分类专栏： jquery JavaScript

本文链接：https://blog.csdn.net/mao1055229269/article/details/19073867

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

表单验证工具jquery.validate.js 用起来很方便，但是有时候，用了这个用具发现并不能完全满足自己的需求，这时就想起来用onsubmit验证。

eg:表单有账号、密码、重复密码、email四个输入框。在onsubmit的方法中，用多个if判断，一个不合法就return false;

form的 οnsubmit=“return onSubmitCheck()”

onSubmit 的js方法：

function onSubmitCheck(){
		//验证账号，省略
		
		//验证密码两次是否一致
		if(!pasEqual()){
			return false;
		};
		// 验证邮箱
		if(!emailCheck()){
			alert("email");
			return false;
		};
		
		with(document.forms[0])
	       {
			action="<%=request.getContextPath()%>/accountManager/insertAction.do";
			submit();
		   }

	}

前面的验证账号，密码，都好使，但是验证邮箱的时候，尽管提示邮箱不合法，但是发现ie8下狂点提交，居然邮箱不正确，也提交了过去。即：return false,却提交了。ie10不会出现，ie8不行。

onSubmitCheck改了多次还是不行，最后用了下面的方法解决了

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>

<title>Insert title here</title>


</head>
<body>

<form id="myform" action="aaa.jsp" >
账号（必须的）：<input type="text" required>
<br>
密码：<input type="password" id="mypassword">
<br>
重复密码：<input type="password" id="repassword" equalTo="#mypassword" >
<br>
邮箱：<input type="text" id="email" email="true" required>

<br>
<input type="submit" value="提交">

<p>这里出现的问题，第一个验证条件只要成功就可以提交。eg：账号不为空就可以提交，假如密码放到最上面，则：密码一致就可以提交，其他的条件尽管验证了，但是不阻止提交。</p>
<p>邮箱格式没有验证可以输入中文</p>
</form>

</body>
</html>

javascript代码：（放到html的标签下面后面就可以）

<script>

 $(function(){
			//指明校验什么表单
			//$("#myform").validate();
			
			
			//maojd update date:2014/2/11 10:33 onsubmit一起使用在ie8下有问题。所以改成这种方式。在validate通过之后从新验证自己需要验证的值
			
			$("#myform").validate({
				 onsubmit:true,// 是否在提交时验证,默认也是true 
				 
				 //validate外部js验证通过之后，点击提交表单回调 此函数 
				 submitHandler: function(form) {  
					
					//验证密码两次是否一致
					if(!pasEqual()){
						return false;
					};
					// 验证邮箱
					if(!emailCheck()){
						//alert("email");
						return false;
					};
					
					//alert("真的提交 ");
					with(document.forms[0]){
							action="bbb.jsp";
							submit();
					}
					//form.submit();提交表单，如果不写，即便通过表单也不会自动提交 
				}, 
				  
				 //不通过，点击提交回调此函数 
				invalidHandler: function(form, validator) { 
					//alert("not pass验证没有通过"); 
					return false;
				},
			});
			
			
});


	/*  maojd update 邮箱验证中文 */ 
	function emailCheck(){
		var email = document.getElementById("email").value;
		if(isValidTrueName(email)){
			return true;
		}else{
			return false;
		}
	}
	 
	function isValidTrueName(temp){
		var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        return reg.test(temp);
	}
	
	//moajd update 添加手动验证 密码是否一致
	//验证密码是否一致,一致返回true.否则返回false
	 function pasEqual(){
		var mypassword = $("#mypassword").val();
		var repassword = $("#repassword").val();
		//alert(mypassword + "." + repassword+"是否一样" + (mypassword==repassword));
		if(mypassword==repassword){
			return true;
		}else{
			return false;
		}
	}

</script>

其实说白了还是用的validate验证的，只要灵活运行validate的api，实现这个还是不成问题的。还有一点提一下，现在这个验证可以验证了，提示信息点击提交就消失了，可以手动在验证方法添加，这里只提供一下自己的demo思路了。

验证方法会继续学习，继续更新

在此致谢：

jquery---------validate和onsubmit同时使用：http://zhchx0827.iteye.com/blog/1402290

jquery validate.js表单验证的基本用法入门：http://www.jb51.net/article/23420.htm

jquery.Validation.js 学习笔记 [待更新]（API 和 DEMO等）：http://blog.csdn.net/lxbin/article/details/4169965

maojd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证validate和onsubmit同时存在

表单验证工具jquery.validate.js 用起来很方便，但是有时候，用了这个用具发现并不能完全满足自己的需求，这时就想起来用onsubmit验证。eg:表单有账号、密码、重复密码、email四个输入框。在onsubmit的方法中，用多个if判断，一个不合法就return false;
复制链接

扫一扫