前端验证非常的重要，可以减轻服务器端的压力。这里讲一个很基本的验证操作。
一 编写前端页面
在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标签库 --> <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; } }
九 重启服务器，进行相关的前端验证
如果没有输入值，则提示:
输入的值格式不正确，则提示:
输入的值格式正确，则提示:
输入的值继续错误时，则提示:
正确与错误可以实现随时转换，如果正确，则显示对号的图片，如果错误，则显示错误的图片。
但还是有一个问题，即使错误了，当点击提交按钮时，仍然可以提交。
十 添加提交验证
在form表单里，添加一个onsubmit的方法:
<form action="#" method="post" id="myform" onsubmit="return formValidate()">
在JS中添加:
function formValidate(){ return userNameValidate()&&passwordValidate()&&repasswordValidate() &&telValidate()&&emailValidate(); }
这时重启服务器，进行相应的判断。
有错误时，是无法进行提交的。
当全部正确时，才可以进行提交。
这里，才可以正确的进行提交。
十一总结
这种方式的验证，过程虽然简单，都是先写出一个，然后一个个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>
谢谢!!!
