JS表单验证代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS表单验证代码相关的知识，希望对你有一定的参考价值。
function jsusername()
var username = document.form1.username.value;
var ts = document.getElementById("usernamets");
if(username.length < 6)
ts.innerHTML ="6个字";
return false;
else
return true;
上面是我写的一个用户名的验证JS代码
我把FORM写成
<form method="post" name="form1" onsubmit="javascript:return jsusername()">
这样当我提交的时候若用户名不符合要求则不能被执行提交
问题：以上我这样写的只能是对一个表单里面的一个文本字段进行检测
我想知道的是如何写我才可以对所有的如（用户名，密码，地址，年龄）都进行检测，在提交的时候若这些数据不符合要求则不能被执行，反而提示出
ts.innerHTML ="6个字";
求求那位高手帮帮忙，在线等答案
==================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试页面</title>
<script type="text/javascript">
function checkform()
//验证用户名
if($("username").value == "")
$("n_msg").innerHTML ="用户名不可以为空";
$("username").select();
$("username").focus();
return false;
else
if($("username").value.length < 6)
$("n_msg").innerHTML = "用户名必须大于6个字符";
$("username").select();
$("username").focus();
return false;
//验证密码
if($("password").value == "")
$("p_msg").innerHTML ="密码不可以为空";
$("password").select();
$("password").focus();
return false;
else
if($("password").value.length < 10)
$("p_msg").innerHTML = "密码必须大于10个字符";
$("password").select();
$("password").focus();
return false;
//.....（下面的可以以此类推）
return true;
function $(id)
return document.getElementById(id);
</script>
<style type="text/css">
body font:12px 宋体
.c_red color:#f00
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<form method="post" onsubmit="return checkform()">
<tr>
<td width="89">用户名</td>
<td width="223"><input name="username" type="text" id="username" /></td>
<td width="188" id="n_msg" class="c_red"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="password" type="password" id="password" /></td>
<td id="p_msg" class="c_red"></td>
</tr>
<tr>
<td colspan="3"><input name="sub" type="submit" id="sub" value="提交" /></td>
</tr>
</form>
</table>
</body>
</html>
===========================
上面的为代码部分 我已经调试没问题 希望可以帮助您
祝早日解决~
.NET中表单的JS验证
JS验证代码如下：（需要引入两个JS包）
1 <script type="text/javascript" src="/js/jquery.validate.min.js"></script> 2 <script type="text/javascript" src="/js/jquery-1.7.2.js"></script> 3 <script type="text/javascript"> 4 function ValidateCartoon(){ 5 var name = $("#txtCompany").val().trim(); 6 if(name==""){ 7 alert("公司／单位名称不能为空！"); 8 return false; 9 } 10 var mobile = $("#txtName").val().trim(); 11 if(mobile==""){ 12 alert("姓名不能为空！"); 13 return false; 14 } 15 var email=$("#txtEmail").val().trim(); 16 var pattern = /^([\\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\\.[a-zA-Z0-9_-])+/; 17 if(email==""){ 18 alert("邮箱不能为空"); 19 return false; 20 } 21 if (!pattern.test(email)) { 22 alert("请输入正确的邮箱地址。"); 23 return false; 24 } 25 var mobile = $("#txtPhone").val().trim(); 26 var str =/^((1[3|5|7|8][0-9]{1})+\\d{8})$/; 27 if(mobile==""){ 28 alert("联系电话不能为空！"); 29 return false; 30 } 31 else if(!mobile.match(str)){ 32 alert("请输入正确的11位手机号！"); 33 return false; 34 } 35 36 return true; 37 38 } 39 </script>
.NET代码如下：
1 <form id="form1" runat="server"> 2 <div> 3 <div>联系方式信息如下：</div> 4 <dl> 5 <dt> <span class=\'cRed\'>*</span>公司／单位名称 （必填）</dt> 6 <dd><asp:TextBox ID="txtCompany" runat="server"></asp:TextBox></dd> 7 </dl> 8 <dl> 9 <dt><span class=\'cRed\'>*</span> 姓名 （必填）</dt> 10 <dd><asp:TextBox ID="txtName" runat="server"></asp:TextBox></dd> 11 </dl> 12 <dl> 13 <dt><span class=\'cRed\'>*</span> 邮件地址 （必填，检查邮件格式）</dt> 14 <dd><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></dd> 15 </dl> 16 <dl> 17 <dt> 电话 （可选择填写）</dt> 18 <dd><asp:TextBox ID="txtPhone" runat="server"></asp:TextBox></dd> 19 </dl> 20 <asp:Button ID="btnSubmit" runat="server" Text="提交信息" OnClientClick="return ValidateCartoon()" OnClick="btnSubmit_Click" /> 21 </div> 22 </form>
如上面代码那样即可实现.NET表单的JS验证。
以上是关于JS表单验证代码的主要内容，如果未能解决你的问题，请参考以下文章