js表单验证:字数验证、邮箱格式、字母开头,重复密码

JavaScript023

js表单验证:字数验证、邮箱格式、字母开头,重复密码,第1张

<html>

<head>

<script type="text/javascript">

function validate()

{

var ok=true,un,pw1,pw2,el,ch0

var r = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g

if(""==(un=document.f.user.value))

{

alert("用户名不能为空!")

document.f.user.focus()

ok=false

}

else if(""==(pw1=document.f.password1.value))

{

alert("密码不能为空!")

document.f.password1.focus()

ok=false

}

else if(""==(pw2=document.f.password2.value))

{

alert("重复密码不能为空!")

document.f.password2.focus()

ok=false

}

else if(""==(el=document.f.email.value))

{

alert("邮箱不能为空!")

document.f.email.focus()

ok=false

}

if(ok)

{

if(!(un.length>=6 &&un.length<=20))

{

alert("用户名长度必须大于等于6小于等于20!")

document.f.user.focus()

ok=false

}

else

{

ch0=un.charAt(0).toLowerCase()

if(!(ch0>="a" &&ch0<="z"))

{

alert("用户名必须以字母开头!")

document.f.user.focus()

ok=false

}

else if(pw1!=pw2)

{

alert("重复密码与密码必须相同!")

document.f.password2.focus()

ok=false

}

else if(!r.test(el))

{

alert("不是有效的邮箱地址!")

document.f.email.focus()

ok=false

}

}

}

if(ok)

{

alert("恭喜你,通过了有效性验证!")

}

}

</script>

</head>

<body>

<form name="f">

用户名:<input type="text" name="user" /><br /><br />

密码:<input type="text" name="password1" /><br /><br />

重复密码:<input type="text" name="password2" /><br /><br />

邮箱:<input type="text" name="email" /><br /><br />

<input type="button" value="验证" onclick="validate()" />

</form>

</body>

</html>

举个例子吧:

<input type=”text” id=”telephone” >

<input type=“button” onclick=“functioncheck1”value=“检测”>

如果要检测它是否符合标准,那我就会在页面中导入js包然后写一个

<script>

functioncheck1()

{

varreg1 = /^1(5|3|8)\d{9}$/

varstr1 = document.getElementById("telephone").value

if(reg1.test(str1)== true)

{

alert("手机号码OK")

}

else

{

alert("请重新输入手机号码")

}

}

</script>

就可以验证到了!

avaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?

用户输入的邮件地址是否合法?

用户是否已输入合法的日期?

用户是否在数据域 (numeric field) 中输入了文本?

必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

 {alert(alerttxt)return false}

else {return true}

}

}

下面是连同 HTML 表单的代码:

<html>

<head>

<script type="text/javascript">function validate_required(field,alerttxt)

{

with (field)

 {

 if (value==null||value=="")

   {alert(alerttxt)return false}

 else {return true}

 }

}

function validate_form(thisform)

{

with (thisform)

 {

 if (validate_required(email,"Email must be filled out!")==false)

   {email.focus()return false}

 }

}</script>

</head>

<body>

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

 {alert(alerttxt)return false}

else {return true}

}

}

下面是连同 HTML 表单的完整代码:

<html>

<head>

<script type="text/javascript">function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

 {alert(alerttxt)return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,"Not a valid e-mail address!")==false)

 {email.focus()return false}

}

}</script>

</head>

<body>

<form action="submitpage.htm"onsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>