表单验证及出现的问题

最新推荐文章于 2022-08-03 19:20:27 发布

jjchack

最新推荐文章于 2022-08-03 19:20:27 发布

阅读量492

点赞数

本文链接：https://blog.csdn.net/jjchack/article/details/47122507

版权

利用jQurey-validate插件进行简单表单验证，在学习过程中，利用自定义校验规则校验用户名时，成功校验，但由于加入自定义校验代码，是表单无法提交，原因不知。遂，此此项规则改用javascript书写。

1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎注册</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="test33.js"></script>
<link rel="styleheet" href="style.css" type="text/css"/>
<style type="text/css">
#domeform label.error {    //错误显示样式
font-weight: bold;
color: #EA5200;
}
#error1 { margin-top:15px; color:#FF0000}       //是错误信息位置对正
#error4 { margin-top:15px}
.errors { margin-top:15px}       //密码的位置，用id调不动，不知为何
.STYLE1 {font-size: x-large}
</style>
<script type="text/javascript">
<span style="white-space:pre">	</span>function reLoadCode(){
<span style="white-space:pre">	</span>var time = new Date().getTime();
<span style="white-space:pre">	</span>document.getElementById("imageCode").src="imageServlet?id="+time;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
</script>
<script type="text/javascript">
var i;
var j;
<span style="white-space:pre">	</span>function check(value){
<span style="white-space:pre">	</span>if(value.value=="") return;
<span style="white-space:pre">	</span>var str = /^[\u0391-\uFFE5\w]+$/;
<span style="white-space:pre">	</span>if(str.test(value.value)) {
<span style="white-space:pre">	</span>document.getElementById("error1").innerHTML=" ";
<span style="white-space:pre">	</span>var v=true;
<span style="white-space:pre">	</span>i=v;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>else {
<span style="white-space:pre">	</span>document.getElementById("error1").innerHTML="用户名只能包括中文字英文字母、数字和下划线";
<span style="white-space:pre">	</span>var v=false;
<span style="white-space:pre">	</span>i=v;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>function duan() {
<span style="white-space:pre">	</span>  if(i=true){
<span style="white-space:pre">	</span>  alert("true");
<span style="white-space:pre">	</span>  }
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>function pan() {   //提交判断
<span style="white-space:pre">	</span>if(i==true&&j==true) 
<span style="white-space:pre">	</span> return true;
<span style="white-space:pre">	</span> else
<span style="white-space:pre">	</span> return false;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>function xie(obj) {   //checkbox判断
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>j=obj.checked;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
</script>


<link type="text/css" rel="stylesheet" href="register.css" />
<style type="text/css">
<!--
.STYLE1 {font-family: "宋体"}
-->


</style>
</head>
<div id="body">
<body background="img/pattern.png">
<div class="STYLE1" id="title">
  <h1>欢迎注册</h1>
</div>
<div id="register">
<form id="domeform" action="1.html" οnsubmit="return pan()" >
<table width="718" border="0">
  <tr>
    <td width="167"> <div id="m"><p class="STYLE1">用户名：</p>
    </div></td>
    <td width="205"><br/>
      <input type="text" id="username"name="username" value="" height="50px" width="200px"  style="border-radius:20px;"
<span style="white-space:pre">	</span>   autocomplete="off"  οnblur="check(this)"></input><br/>
<span style="white-space:pre">	</span></td>
<span style="white-space:pre">	</span><td width="332"><div id="error1"></div></td>
  </tr>
  <tr>
    <td><div id="m"><p class="STYLE1">密码：</p>
    </div></td>
    <td><br/> <input type="password" id="password" name="password" value="" height="50px" width="200px" style="border-radius:20px;"
<span style="white-space:pre">	</span>autocomplete="off"/>
<span style="white-space:pre">	</span><br/></td>
<span style="white-space:pre">	</span><td><div id="error2" class="errors"></div></td>
  </tr>
  <tr>
    <td><div id="m"><p class="STYLE1">确认密码：</p>
    </div></td>
    <td><br/><input type="password" id="confirm-password" name="confirm-password" value="" height="50px" width="200px" style="<span style="white-space:pre">			</span>             border-radius:20px;" autocomplete="off"/><br/></td>
<span style="white-space:pre">	</span><td><div id="error3" class="errors"></div></td>
  </tr>
  <tr>
    <td><div id="m"><p class="STYLE1">邮箱：</p>
    </div></td>
    <td><br/><input type="text" id="email" name="email" value="" height="50px" width="200" style="border-radius:20px;" 
<span style="white-space:pre">	</span>autocomplete="off"/><br/></td>
<span style="white-space:pre">	</span><td><div id="error4"></div></td>
  </tr>
 <tr>
    <td><div id="m"><p class="STYLE1">验证码：</p>
    </div></td>
    <td><br/><input type="text" id="checkcode" name="checkcode" value="" height="60px" width="50" " 
<span style="white-space:pre">	</span>autocomplete="off"/><br/>
<span style="white-space:pre">	</span><img src="imageServlet" id="imageCode" alt="验证码" title="验证码">
    <a href="javaScript:reLoadCode()">看不清</a><br/>
<span style="white-space:pre">	</span></td>
<span style="white-space:pre">	</span><td><div id="error5"></div></td>
  </tr>
  <tr>
  <span style="white-space:pre">	</span><td>&nbsp;</td>
    <td>
<span style="white-space:pre">	</span><div id="termswrap">
<span style="white-space:pre">	</span><p><input id="terms" type="checkbox" name="terms" οnblur="xie(this)" ></input> 我已经阅读协议~</p>
<span style="white-space:pre">	</span></div><span style="white-space:pre">	</span></td>
  </tr>
  <tr>
  <span style="white-space:pre">	</span><td>&nbsp; </td>
    <td><input name="image" type="image" src="img/按钮1.png"></td>
  </tr>
</table>
</form>
</div>


</body>
</div>


</html>

2.test33.js

$(document).ready(function() {
		$("#domeform").validate({
			rules:{
				username:{
					required:true,
					rangelength: [4,20] ,
				},
				password:{
					required:true,
					rangelength: [6,20] ,
				},
				"confirm-password":{
					equalTo:"#password"
				},
				email:{
					required:true,
					email:true,	
				},
				
			},
			messages:{
				username:{
					required:"请输入用户名",
					//minlength:"不得少于两位",
					//maxlength:"不得超过十位"
					rangelength: "用户名必须在4-20个字符之间" 
				},
				password:{
					required:"请填写密码",
					rangelength: "密码必须在6-20个字符之间"
				},
				email:{
					required:"请填写邮箱",
					email:"请输入正确的邮箱格式",
					
				},
				"confirm-password":{
					equalTo:"两次输入密码不一致"
				},
				
			},
			
			errorPlacement: function (error, element) {                            //选择不同元素，输出到不同位置
			if ( element.is($('input[type=text]').eq(0)) )
        	error.appendTo($("div[id='error1']"));
   			else if ( element.is($('input[type=password]').eq(0)) )
       		error.appendTo($("div[id='error2']"));
    		else if(element.is(":password"))
        	error.appendTo($("div[id='error3']"));
			else  if(element.is($('input[type=text]').eq(1)))
        	error.appendTo($("div[id='error4']"));
		    },
			highlight:function(element,errorClass,validClass) {           //给未通过的元素添加效果
				$(element).addClass(errorClass).removeClass(validClass);
			    $(element).fadeOut().fadeIn();
			},
		});
		
		
	});

document.getElementById("error1").innerHTML="用户名只能包括中文字英文字母、数字和下划线";

innerHTML可以向指定位置插入html代码

jjchack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证及出现的问题

利用jQurey-validate插件进行简单表单验证，在学习过程中，利用自定义校验规则校验用户名时，成功校验，但由于加入自定义校验代码，是表单无法提交，原因不知。遂，此此项规则改用javascript书写。1.html代码欢迎注册#domeform label.error { //错误显示样式font-weight: bold;c
复制链接

扫一扫