您的位置: 首页  >  文章  >  jQuery前端基本验证(一)

jQuery前端基本验证(一)

分类: 文章 • 2022-10-09 20:55:08

“两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。特别感谢"java1234知识分享网 "和"黑马程序员官网"，所有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。

 上一章简单介绍了Hibernate简单注解开发和事务处理(四),如果没有看过，请观看上一章 

 

前端验证非常的重要，可以减轻服务器端的压力。这里讲一个很基本的验证操作。

一  编写前端页面

在register.jsp页面中:  注意相应的输入Input框与对应的span标签有一定的联系。 span标签=input+"Title"

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<title>前端验证</title>
</head>
<body>
	 <form action="#" method="post" id="myform">
            <p>
                <label for="userName">通行证用户名：</label>
                <input type="text" id="userName" size="13px"><i>@163.com</i><span id="userNameTitle" style="margin-left:19px">请输入4-12位用户名（首位为字母）</span>
            </p>
            <p>
                <label for="password">登录密码：</label>
                <input type="password" id="password"><span id="passwordTitle">密码为6-16位</span>
            </p>
            <p>
                <label for="repassword">重复登录密码：</label>
                <input type="password" id="repassword"><span id="repasswordTitle">请再次输入密码</span>
            </p>
            <p>
            <label for="tel">关联手机号:</label>
            <input type="text" id="tel"><span id="telTitle">请输入关联手机号</span>
            </p>
            <p>
                <label for="email">保密邮箱：</label>
                <input type="text" id="email"><span id="emailTitle">请输入保密邮箱</span>
            </p>
            <p class="button">
            	<input type="submit" value="注册"/>
            	<input type="reset" value="清空"/>
            </p>
        </form>
</body>
</html>

二   利用CSS简单美化一下页面,添加相应的样式

<!-- 定义样式 -->
<style>
	 .success
        {
            background-image: url("Plugins/checked.gif");
            background-color:#E6FEE4;
            border-color:#01BE00;
            background-repeat: no-repeat;
            background-position: left 2px;
            padding:0 18px;
        }
        .danger
        {
            background-image: url("Plugins/unchecked.gif");
            background-color:#FFF2E5;
            border-color:#FF3300;
            background-repeat: no-repeat;
            background-position: left 2px;
            padding:0 18px;
        }
         label
        {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            font-size: 14px;
            display: inline-block;
        }
        span
        {
            background-color:#FFFFDA ;
            border: 1px solid #FFCD00;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            margin-left: 40px ;

        }
        .button
        {
            margin-left: 159px;
            border: dashed 1px transparent;
            background-color: transparent;
            cursor: pointer;
        }
</style>

三   定义一个Plugins插件文件夹，里面放置Jquery库和正确和错误的图片

目录结构为:

jQuery前端基本验证(一)

引入相应的Jquery插件库

<!-- 引入Jquery标签库 -->
<script src="Plugins/jquery-1.7.2.js"></script>

四  定义用户名的相关验证

在jquery操作中，所有的验证都是在鼠标移出输入框时进行相应的验证，这也是实时的验证。 用的是Jquery中的mouseleave()方法。

jquery中添加

$(function(){
		//对用户名进行相应的验证.
		$("#userName").mouseleave(function(){
			userNameValidate();
		});
});

注意相应的方法为，id名称+Validate;

JS中添加:

//用户名的相关验证
	function userNameValidate(){
		//先判断是否为空
		var value=$("#userName").val();
		if(value.length==0)
        {
            $("#userNameTitle").text('通行证用户名不能为空');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }
		//定义正则表达式
        var pattern=/^[A-Za-z][A-Za-z0-9]{3,11}$/;
        if(!pattern.test(value))
        {
            $("#userNameTitle").text('通行证用户名格式错误，请重新输入');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#userNameTitle").text('通行证用户名输入正确');
             $("#userNameTitle").removeClass('danger').addClass('success');
             return true;
        }  
	}

五   定义密码的相关验证

也同样放在jquery 方法里面。

jquery中添加

//对密码进行验证
		$("#password").mouseleave(function(){
			passwordValidate();
		});

 JS中添加，相关验证为:

//密码的相关验证
	function passwordValidate(){
		//先判断是否为空
		var value=$("#password").val();
		if(value.length==0)
        {
            $("#passwordTitle").text('密码不能为空');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }
		//定义正则表达式
        var pattern=/^[A-Za-z0-9]{6,16}$/;
        if(!pattern.test(value))
        {
            $("#passwordTitle").text('密码不符合格式，请重新输入');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#passwordTitle").text('密码输入正确');
             $("#passwordTitle").removeClass('danger').addClass('success');
             return true;
        }
	}

六   重复密码的相关验证

jquery中添加

//对重复密码进行验证
		$("#repassword").mouseleave(function(){
			repasswordValidate();
		});

js中添加相应的验证方法为:

//重复密码的相关验证
	function repasswordValidate(){
		//先判断是否为空
		var value=$("#repassword").val();
		if(value.length==0)
        {
            $("#repasswordTitle").text('重复密码不能为空');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        if(!(value==$("#password").val()))
        {
            $("#repasswordTitle").text('两次输入的密码不一致，请重新输入');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#repasswordTitle").text('两次密码一致');
             $("#repasswordTitle").removeClass('danger').addClass('success');
             return true;
        }
	}

七  手机号的相关验证

Jquery中添加

//对手机号进行相应的验证
		$("#tel").mouseleave(function(){
			telValidate();
		});

 JS中添加

//手机号的相关验证
	function telValidate(){
		//先判断是否为空
		var value=$("#tel").val();
		if(value.length==0)
        {
            $("#telTitle").text('手机号不能为空');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        var pattern=/^1[34578]\d{9}$/;
        if(!pattern.test(tel.value))
        {
            $("#telTitle").text('手机号码格式错误，请重新输入');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#telTitle").text('手机号输入正确');
             $("#telTitle").removeClass('danger').addClass('success');
             return true;
        }
	}

八  邮箱的相关验证

Jquery中添加

//对邮箱进行相应的验证
		$("#email").mouseleave(function(){
			emailValidate();
		});

 JS中添加

//邮箱的相关验证
	function emailValidate(){
		//先判断是否为空
		var value=$("#email").val();
		if(value.length==0)
        {
            $("#emailTitle").text('邮箱不能为空');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        var pattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!pattern.test(tel.value))
        {
            $("#emailTitle").text('邮箱格式错误，请重新输入');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#emailTitle").text('邮箱输入正确');
             $("#emailTitle").removeClass('danger').addClass('success');
             return true;
        }
	}

九  重启服务器，进行相关的前端验证

如果没有输入值，则提示:

jQuery前端基本验证(一)

输入的值格式不正确，则提示:

jQuery前端基本验证(一)

 输入的值格式正确，则提示:

jQuery前端基本验证(一)

输入的值继续错误时，则提示:

jQuery前端基本验证(一)

 正确与错误可以实现随时转换，如果正确，则显示对号的图片，如果错误，则显示错误的图片。

但还是有一个问题，即使错误了，当点击提交按钮时，仍然可以提交。

十  添加提交验证

在form表单里，添加一个onsubmit的方法:

<form action="#" method="post" id="myform" onsubmit="return formValidate()">

在JS中添加:

function formValidate(){
		return userNameValidate()&&passwordValidate()&&repasswordValidate()
		&&telValidate()&&emailValidate();
	}

这时重启服务器，进行相应的判断。

jQuery前端基本验证(一)

 有错误时，是无法进行提交的。

当全部正确时，才可以进行提交。

jQuery前端基本验证(一)

这里，才可以正确的进行提交。

十一总结

这种方式的验证，过程虽然简单，都是先写出一个，然后一个个ctrl+c,ctrl+v, 但是这种方式太冗余了，而且不易于快速修改。

提示的页面也不太好看，每写一个页面，都要这样重复的进行判断。需要渐渐的去优化一下。

十二   JS验证的代码

<!-- 引入Jquery标签库 -->
<script src="Plugins/jquery-1.7.2.js"></script>
<script>
	$(function(){
		//对用户名进行相应的验证.
		$("#userName").mouseleave(function(){
			userNameValidate();
		});
		//对密码进行验证
		$("#password").mouseleave(function(){
			passwordValidate();
		});
		//对重复密码进行验证
		$("#repassword").mouseleave(function(){
			repasswordValidate();
		});
		//对手机号进行相应的验证
		$("#tel").mouseleave(function(){
			telValidate();
		});
		//对邮箱进行相应的验证
		$("#email").mouseleave(function(){
			emailValidate();
		});
	})
	//用户名的相关验证
	function userNameValidate(){
		//先判断是否为空
		var value=$("#userName").val();
		if(value.length==0)
        {
            $("#userNameTitle").text('通行证用户名不能为空');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }
		//定义正则表达式
        var pattern=/^[A-Za-z][A-Za-z0-9]{3,11}$/;
        if(!pattern.test(value))
        {
            $("#userNameTitle").text('通行证用户名格式错误，请重新输入');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#userNameTitle").text('通行证用户名输入正确');
             $("#userNameTitle").removeClass('danger').addClass('success');
             return true;
        }  
	}
	//密码的相关验证
	function passwordValidate(){
		//先判断是否为空
		var value=$("#password").val();
		if(value.length==0)
        {
            $("#passwordTitle").text('密码不能为空');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }
		//定义正则表达式
        var pattern=/^[A-Za-z0-9]{6,16}$/;
        if(!pattern.test(value))
        {
            $("#passwordTitle").text('密码不符合格式，请重新输入');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#passwordTitle").text('密码输入正确');
             $("#passwordTitle").removeClass('danger').addClass('success');
             return true;
        }
	}
	//重复密码的相关验证
	function repasswordValidate(){
		//先判断是否为空
		var value=$("#repassword").val();
		if(value.length==0)
        {
            $("#repasswordTitle").text('重复密码不能为空');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        if(!(value==$("#password").val()))
        {
            $("#repasswordTitle").text('两次输入的密码不一致，请重新输入');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#repasswordTitle").text('两次密码一致');
             $("#repasswordTitle").removeClass('danger').addClass('success');
             return true;
        }
	}
	//手机号的相关验证
	function telValidate(){
		//先判断是否为空
		var value=$("#tel").val();
		if(value.length==0)
        {
            $("#telTitle").text('手机号不能为空');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        var pattern=/^1[34578]\d{9}$/;
        if(!pattern.test(tel.value))
        {
            $("#telTitle").text('手机号码格式错误，请重新输入');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#telTitle").text('手机号输入正确');
             $("#telTitle").removeClass('danger').addClass('success');
             return true;
        }
	}
	//邮箱的相关验证
	function emailValidate(){
		//先判断是否为空
		var value=$("#email").val();
		if(value.length==0)
        {
            $("#emailTitle").text('邮箱不能为空');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }
		//判断值是否相同
        var pattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!pattern.test(value))
        {
            $("#emailTitle").text('邮箱格式错误，请重新输入');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }else{
        	 $("#emailTitle").text('邮箱输入正确');
             $("#emailTitle").removeClass('danger').addClass('success');
             return true;
        }
	}
	function formValidate(){
		return userNameValidate()&&passwordValidate()&&repasswordValidate()
		&&telValidate()&&emailValidate();
	}
</script>

谢谢!!!

 

 
 
 

相关推荐