js验证表单

JavaScript017

js验证表单,第1张

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>

<HTML>

<meta charset="gbk"/>

<head>

  <SCRIPT LANGUAGE="JavaScript">

    function Check(frm1)

     {

      if (frm1.username.value==""){

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

          document.frm1.username.focus()

          return false

      }

      if (frm1.p.value==""){

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

          document.frm1.p.focus()

          return false

      }

      if (frm1.p2.value!=frm1.p.value){

          alert("两次密码不一致!")

          document.frm1.p2.focus()

          return false

      }

      if (frm1.y.value==""){

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

          document.frm1.y.focus()

          return false

      }

}

</SCRIPT>

</head>

<BODY>

 <FORM NAME="frm1">

    用户名:<INPUT TYPE="text" name="username"><br>

    密码:<INPUT TYPE="password"  name="p"><br>

    重复密码:<INPUT TYPE="password" name="p2"><br>

    邮箱:<INPUT TYPE="text" name="y"><br>

    城市:<select>

       <option>山东</option>

       <option>湖南</option>

    </select><br>

    爱好:吃饭<INPUT TYPE="checkbox">睡觉<INPUT TYPE="checkbox">吃饭和睡觉<INPUT TYPE="checkbox">

男<INPUT TYPE="radio">女<INPUT TYPE="radio"><br>

  

    个人简介 <textarea> </textarea> <br>

    <INPUT TYPE="submit"  VALUE="确定" ONCLICK="return Check(this.form)">

    <INPUT TYPE="submit"  VALUE="重置" >

</FORM>

</BODY>

</HTML>

改成这样就行了

可以在submit按钮上添加onclick事件。通过创建function函数进行验证,全部通过后执行form.submit(),错误则利用alert或者innerHTML显示错误信息。