JavaScript表单验证的两种实现方法
本文实例为大家分享了js表单验证的实现方法，供大家参考，具体内容如下
第一种：js表单验证
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>注册-个人用户</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<scriptsrc="https://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
body{
font-family:Arial,"宋体",Lucida,Verdana,Helvetica,sans-serif;
font-size:12px;
color:#333;
line-height:150%;
background:#f2f2f2;
}
.hide{display:none;}
.focus,.error{
color:#e4393c;
line-height:36px;
height:36px;
position:absolute;
top:0px;
width:260px;
padding:05px;
background:#FFEBEB;
border:1pxsolid#ffbdbe;
}
.errorspan,.focusspan{
padding:5px0;
line-height:13px;
display:block;
}
.focus{
color:#666;
width:260px;;
line-height:36px;
background:#f7f7f7;
border:1pxsolid#dddddd;
}
.regist{
width:990px;
padding:0;
margin:0auto;
zoom:1;
}
.mc{
padding:30px020px;
border:solid#dddddd;border-width:0px1px1px;
background:#FFF;
overflow:hidden;
zoom:1;
border-width:0px1px1px;
}
.form{
float:left;
width:750px;
font-size:12px;
}
.formlabel,.forminput,.formselect,.formtextarea,.formbutton,.form.label{
float:left;
font-size:12px;
}
.item{
padding-top:9px;
height:60px;
line-height:34px;
position:relative;
z-index:1;
}
.label{
float:left;
width:190px;
text-align:right;
font-size:14px;
color:#999;
padding-right:10px;
}
.input{
float:left;
position:relative;
width:270px;
overflow:visible;
}
.text{
float:none;
width:275px;
height:37px;
line-height:32px;
border:1pxsolid#cccccc;
font-size:14px;
font-family:arial,"宋体";
overflow:hidden;
}
</style>
</head>
<body>
<divclass="regist">
<divclass="mc">
<formid="personRegForm"class="form"action="login.html"method="POST"onsubmit="returnvalidateForm();">
<divclass="item">
<spanclass="label">用户名：</span>
<divclass="input">
<inputtype="text"id="username"name="username"class="text">
<labelid="username_msg"class="hide"></label>
</div>
</div>
<divclass="item">
<spanclass="label">请设置密码：</span>
<divclass="input">
<inputtype="password"id="password"name="password"class="text">
<labelid="pwd_msg"class="hide"></label>
</div>
</div>
<divclass="item">
<spanclass="label">请确认密码：</span>
<divclass="input">
<inputtype="password"id="pwdRepeat"name="pwdRepeat"class="text">
<labelid="pwdRepeat_msg"class="hide"></label>
</div>
</div>
<divclass="item">
<spanclass="label">验证邮箱：</span>
<divclass="input">
<inputtype="text"id="mail"name="mail"class="text">
<labelid="mail_msg"class="hide"></label>
</div>
</div>
<divclass="item">
<spanclass="label"> </span>
<inputtype="submit"class="btn-img"id="registsubmit"value="立即注册"/>
</div>
</form>
</div>
</div>
<script>
window.onload=function(){
//1.用户名
$("#username").focus(function(){
/*获取焦点
varusername_msg=$("#username_msg");
username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
username_msg.attr("class","focus");
*/
elemFocus("username_msg","4-20位字符，支持英文、数字及'-'、'_'组合");
}).blur(userValidator);
//2.密码
$("#password").focus(function(){
elemFocus("pwd_msg","6-20位字符，可使用字母、数字的组合");
}).blur(pwdValidator);
//3.确认密码
$("#pwdRepeat").focus(function(){
elemFocus("pwdRepeat_msg","6-20位字符，可使用字母、数字的组合");
}).blur(pwdRepeatValidator);
//4.Email
$("#mail").focus(function(){
elemFocus("mail_msg","完成验证后，可以使用该邮箱登录和找回密码");
}).blur(emailValidator);
}
//定义函数-通用的信息提示
functionelemFocus(eleId,text){
varele_msg=$("#"+eleId);
ele_msg.text(text);
ele_msg.attr("class","focus");
}
//定义验证用户名的函数
functionuserValidator(){
//获取用户名输入的值
varvalue=$("#username").val();
//获取用于显示提示信息的元素
varusername_msg=$("#username_msg");
//验证逻辑
if(value==""||value==null){
username_msg.text("用户名不能为空");
username_msg.attr("class","error");
returnfalse;
}elseif(value.length<4||value.length>20){
username_msg.text("用户名的长度不正确");
username_msg.attr("class","error");
returnfalse;
}elseif(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
username_msg.text("用户名输入不正确");
username_msg.attr("class","error");
returnfalse;
}
//验证通过修改正确样式
if(!username_msg.hasClass("hide")){
username_msg.text("");
username_msg.attr("class","hide");
}
returntrue;
}
//定义验证密码的函数
functionpwdValidator(){
varvalue=$("#password").val();
varpwd_msg=$("#pwd_msg");
if(value==""||value==null){
pwd_msg.text("密码不能为空");
pwd_msg.attr("class","error");
returnfalse;
}elseif(value.length<6||value.length>20){
pwd_msg.text("密码的长度不正确");
pwd_msg.attr("class","error");
returnfalse;
}elseif(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwd_msg.text("密码输入不正确");
pwd_msg.attr("class","error");
returnfalse;
}
if(!pwd_msg.hasClass("hide")){
pwd_msg.text("");
pwd_msg.attr("class","hide");
}
returntrue;
}
//定义确认密码验证的函数
functionpwdRepeatValidator(){
varvalue=$("#pwdRepeat").val();
varpwdRepeat_msg=$("#pwdRepeat_msg");
varpwd=$("#password").val();
if(value==""||value==null){
pwdRepeat_msg.text("密码不能为空");
pwdRepeat_msg.attr("class","error");
returnfalse;
}elseif(value.length<6||value.length>20){
pwdRepeat_msg.text("密码的长度不正确");
pwdRepeat_msg.attr("class","error");
returnfalse;
}elseif(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwdRepeat_msg.text("密码输入不正确");
pwdRepeat_msg.attr("class","error");
returnfalse;
}elseif(value!=pwd){
pwdRepeat_msg.text("两次密码输入不一致");
pwdRepeat_msg.attr("class","error");
returnfalse;
}
if(!pwdRepeat_msg.hasClass("hide")){
pwdRepeat_msg.text("");
pwdRepeat_msg.attr("class","hide");
}
returntrue;
}
//定义Email验证的函数
functionemailValidator(){
varvalue=$("#mail").val();
varemail_msg=$("#mail_msg");
if(value==""||value==null){
email_msg.text("Email不能为空");
email_msg.attr("class","error");
returnfalse;
}elseif(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
email_msg.text("Email格式不正确");
email_msg.attr("class","error");
returnfalse;
}
if(!email_msg.hasClass("hide")){
email_msg.text("");
email_msg.attr("class","hide");
}
returntrue;
}
functionvalidateForm(){
if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
returnfalse;
}
returntrue;
}
</script>
</body>
</html>
第二种：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title></title>
<style>
*{
padding:0;
margin:0;
}
form{
width:570px;
height:300px;
margin:100pxauto;
}
label{
width:64px;
float:left;
clear:left;
height:36px;
line-height:36px;
margin-top:10px;
}
input{
width:300px;
height:36px;
line-height:36px;
margin-top:10px;
text-indent:8px;
font-size:16px;
font-family:"微软雅黑";
border:1pxsolid#ccc;
float:left;
}
#sub{
width:302px;
height:40px;
border:1pxsolid#ccc;
background:#888;
color:#fff;
font-size:18px;
text-indent:0;
}
.spa{
height:36px;
line-height:36px;
width:204px;
display:inline-block;
float:left;
font-size:12px;
color:#BD362F;
text-indent:10px;
margin-top:10px;
}
</style>
</head>
<body>
<formaction=""method="post">
<labelid="name">姓 名：</label><inputtype="text"name="username"id="username"value=""placeholder="请输入姓名"/><spanclass="spaspa1"></span><br/>
<labelid="phone">手机号：</label><inputtype="text"name="userphone"id="userphone"value=""placeholder="请输入手机号"/><spanclass="spaspa2"></span><br/>
<labelid="address">地 址：</label><inputtype="text"name="useraddress"id="useraddress"value=""placeholder="请输入地址"/><spanclass="spaspa3"></span><br/>
<label> </label><inputtype="submit"value="注册"id="sub"/>
</form>
<scriptsrc="http://code.jquery.com/jquery-1.4.1.js"></script>
<scripttype="text/javascript">
window.onload=function(){
$("#username").focus()
}
/************************失焦判断**********************************/
$("input").blur(function(){
$(".spa").css("color","#BD362F")
if($(this).is("#username")){//姓名判断
varna=/^[\u4E00-\u9FA5]{2,4}$/
if($("#username").val()!=""){
if(!(na.test($("#username").val()))){
$(".spa1").text("请输入2-4个汉字");
$(this).css("border","1pxsolid#BD362F")
returnfalse;
}elseif(na){
$(".spa1").text("");
returntrue;
}
}else{
$(".spa1").text("");
}
}
if($(this).is("#userphone")){//手机号判断
varph=/^1[3|5|7|8|][0-9]{9}$/
if($("#userphone").val()!=""){
if(!(ph.test($("#userphone").val()))){
$(".spa2").text("请输入正确手机号");
$(this).css("border","1pxsolid#BD362F")
returnfalse;
}elseif(ph){
$(".spa2").text("");
returntrue;
}
}else{
$(".spa2").text("");
}
}
if($(this).is("#useraddress")){//地址判断
varad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
if($("#useraddress").val()!=""){
if(!(ad.test($("#useraddress").val()))){
$(".spa3").text("请输入正确地址");
$(this).css("border","1pxsolid#BD362F")
returnfalse;
}elseif(ad){
$(".spa3").text("");
returntrue;
}
}else{
$(".spa3").text("");
}
}
})
/**********************聚焦提示************************/
$("input").focus(function(){
if($(this).is("#username")){
$(".spa1").text("四个汉字").css("color","#aaa")
$(this).css("border","1pxsolid#aaa")
}
if($(this).is("#userphone")){
$(".spa2").text("11位手机号码").css("color","#aaa")
$(this).css("border","1pxsolid#aaa")
}
if($(this).is("#useraddress")){
$(".spa3").text("最少8个字符（汉字、字母和数字）").css("color","#aaa")
$(this).css("border","1pxsolid#aaa")
}
})
/***********************提交验证***************************/
$("#sub").click(function(){
varna=/^[\u4E00-\u9FA5]{2,4}$/;//姓名正则
varph=/^1[3|5|7|8|][0-9]{9}$/;//手机号正则
varad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;//地址正则
if(na.test($("#username").val())&&ph.test($("#userphone").val())&&ad.test($("#useraddress").val())){
returntrue;
}else{
if($("#username").val()==""){
$(".spa1").text('请你填写用户名')
}
if($("#userphone").val()==""){
$(".spa2").text('请你填写手机号')
}
if($("#useraddress").val()==""){
$(".spa3").text('请你填写地址')
}
returnfalse;
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。