两种实现表单验证的javascript方法

本文格式为Word版，下载可任意编辑——两种实现表单验证的javascript方法两种实现表单验证的javascript方法

导语：表单验证如何实现呢?下面我给大家介绍两种实现表单验证的javascript方法，大家可以参考阅读，更多详情请关注我。

第一种：js表单验证

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

title注册-个人用户/title

metahttp-equiv=pragmacontent=no-cache

metahttp-equiv=cache-controlcontent=no-cache

metahttp-equiv=expirescontent=0

scriptsrc=///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;

.hidedisplay: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

pclass=regist

pclass=mc

formid=personRegFormclass=formaction=login.htmlmethod=POSTonsubmit=returnvalidateForm;

pclass=item

spanclass=label用户名：/span

pclass=input

inputtype=textid=usernamename=usernameclass=text

labelid=username_msgclass=hide/label

/p

/p

pclass=item

spanclass=label请设置密码：/span

pclass=input

inputtype=passwordid=passwordname=passwordclass=text

labelid=pwd_msgclass=hide/label

/p

/p

pclass=item

spanclass=label请确认密码：/span

pclass=input

inputtype=passwordid=pwdRepeatname=pwdRepeatclass=text

labelid=pwdRepeat_msgclass=hide/label

/p

/p

pclass=item

spanclass=label验证邮箱：/span

pclass=input

inputtype=textid=mailname=mailclass=text

labelid=mail_msgclass=hide/label

/p

/p

pclass=item

spanclass=label/span

inputtype=submitclass=btn-imgid=registsubmitvalue=立刻注册/

/p

/form

/p

/p

script

window.onload=function

//1.用户名

$#username.focusfunction

/*获取焦点

varusername_msg=$#username_msg;

username_msg.text4-20位字符，支持英文、数字及-、_组合;

username_msg.attrclass,focus;

*/

elemFocususername_msg,4-20位字符，支持英文、数字及-、_组合;

.bluruserValidator;

//2.密码

$#password.focusfunction

elemFocuspwd_msg,6-20位字符，可使用字母、数字的组合;

.blurpwdValidator;

//3.确认密码

$#pwdRepeat.focusfunction

elemFocuspwdRepeat_msg,6-20位字符，可使用字母、数字的组合;

.blurpwdRepeatValidator;

//4.Email

$#mail.focusfunction

elemFocusmail_msg,完成验证后，可以使用该邮箱登录和找回密码;

.bluremailValidator;

//定义函数-通用的信息提示

functionelemFocuseleId,text

varele_msg=$#+eleId;

ele_msg.texttext;

ele_msg.attrclass,focus;

//定义验证用户名的'函数

functionuserValidator

//获取用户名输入的值

varvalue=$#username.val;

//获取用于显示提示信息的元素

varusername_msg=$#username_msg;

//验证规律

ifvalue==||value==null

username_msg.text用户名不能为空;

username_msg.attrclass,error;

returnfalse;

elseifvalue.length4||value.length20

username_msg.text用户名的长度不正确;

username_msg.attrclass,error;

returnfalse;

elseif!/^[a-zA-Z0-9-_]4,20$/.testvalue

username_msg.text用户名输入不正确;

username_msg.attrclass,error;

returnfalse;

//验证通过修改正确样式

if!username_msg.hasClasshide

username_msg.text;

username_msg.attrclass,hide;

returntrue;

//定义验证密码的函数

functionpwdValidator

varvalue=$#password.val;

两种实现表单验证的javascript方法

varpwd_msg=$#pwd_msg;

ifvalue==||value==null

pwd_msg.text密码不能为空;

pwd_msg.attrclass,error;

returnfalse;

elseifvalue.length6||value.length20

pwd_msg.text密码的长度不正确;

pwd_msg.attrclass,error;

returnfalse;

elseif!/^[a-zA-Z0-9]6,20$/.testvalue

pwd_msg.text密码输入不正确;

pwd_msg.attrclass,error;

returnfalse;

if!pwd_msg.hasClasshide

pwd_msg.text;

pwd_msg.attrclass,hide;

returntrue;

//定义确认密码验证的函数

functionpwdRepeatValidator

varvalue=$#pwdRepeat.val;

varpwdRepeat_msg=$#pwdRepeat_msg;

varpwd=$#password.val;

ifvalue==||value==null

pwdRepeat_msg.text密码不能为空;

pwdRepeat_msg.attrclass,error;

returnfalse;

elseifvalue.length6||value.length20

pwdRepeat_msg.text密码的长度不正确;

pwdRepeat_msg.attrclass,error;

returnfalse;

elseif!/^[a-zA-Z0-9]6,20$/.testvalue

pwdRepeat_msg.text密码输入不正确;

pwdRepeat_msg.attrclass,error;

returnfalse;

elseifvalue!=pwd

pwdRepeat_msg.text两次密码输入不一致;

pwdRepeat_msg.attrclass,error;

returnfalse;

if!pwdRepeat_msg.hasClasshide

pwdRepeat_msg.text;

pwdRepeat_msg.attrclass,hide;

returntrue;

//定义Email验证的函数

functionemailValidator

varvalue=$#mail.val;

varemail_msg=$#mail_msg;

ifvalue==||value==null

email_msg.textEmail不能为空;

email_msg.attrclass,error;

returnfalse;

elseif!/^\w+[-+.]\w+*@\w+[-.]\w+*\.\w+[-.]\w+*$/.testvalue

email_msg.textEmail格式不正确;

email_msg.attrclass,error;

returnfalse;

if!email_msg.hasClasshide

email_msg.text;

email_msg.attrclass,hide;

returntrue;

functionvalidateForm

if!userValidator||!pwdValidator||!pwdRepeatValidator||!emailValidator

returnfalse;

returntrue;

/script

/body

/html

其次种：

!DOCTYPEhtml

html

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=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姓名：/labelinputtype=textname=usernameid=usernamevalue=placeholder=请输入姓名/spanclass=spaspa1/spanbr/

labelid=phone手机号：/labelinputtype=textname=userphoneid=userphonevalue=placeholder=请输入手机号/spanclass=spaspa2/spanbr/

labelid=address地址：/labelinputtype=textname=useraddressid=useraddressvalue=placeholder=请输入地址/spanclass=spaspa3/spanbr/

label/labelinputtype=submitvalue=注册id=sub/

/form

scriptsrc=/jquery-1.4.1.js/script

scripttype=text/javascript

window.onload=function

$#username.focus

/************************失焦判断**********************************/

$input.blurfunction

$.spa.csscolor,#BD362F

if$this.is#username//姓名判断

varna=/^[\u4E00-\u9FA5]2,4$/

if$#username.val!=

if!na.test$#username.val

$.spa1.text请输入2-4个汉字;

$this.cssborder,1pxsolid#BD362F

returnfalse;

elseifna

$.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.cssborder,1pxsolid#BD362F

returnfalse;

elseifph

$.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.cssborder,1pxsolid#BD362F

returnfalse;

elseifad

$.spa3