表单校验

Posted 2022-12-08 爽走不解释

什么是表单校验？有什么用

访问任何一个带注册表单的网站，你都会发现，当你提交了没有输入符合预期格式的信息的表单时，注册页面都会给你一个反馈，这些信息可能看起来像下面这样的：

• “该字段是必填的”（该字段不能留空）
• “请输入你的电话号码，它的格式是：xxx-xxxx”（它要求你输入的数据格式为三个数字接一个横杠，然后再接着是四个数字）
• “请输入一个合法的邮箱地址”（如果你输入的数据不符合“[e-mail]“的邮箱格式）
• “你的密码长度应该是8至30位的，并且至少应该包含一个大写字母、一个符号以及一个数字”

这就是表单校验 —— 当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单校验可以通过许多不同的方式实现。

直接来看一些常用的表单选择器:

语法	描述	示例
:input	匹配所有input、textarea、select和button 元素	$("#myform :input")选取表单中所有的input、select和button元素
:text	匹配所有单行文本框	$("#myform :text")选取email 和姓名两个input 元素
:password	匹配所有密码框	$("#myform :password" )选取所有 < input type=“password” />元素
:radio	匹配所有单项按钮	$("#myform :radio")选取< input type=“radio” />元素
:checkbox	匹配所有复选框	$(" #myform :checkbox " )选取< input type="checkbox " />元素
: submit	匹配所有提交按钮	$("#myform :submit " )选取< input type="submit " />元素
:image	匹配所有图像域	$("#myform :image" )选取< input type=" image" />元素
: reset	匹配所有重置按钮	$(" #myform :reset " )选取< input type=" reset " />元素
:button	匹配所有按钮	$("#myform :button" )选取button 元素
:file	匹配所有文件域	$(" #myform :file" )选取< input type=" file " />元素
: hidden	匹配所有不可见元素，或者type 为hidden的元素	$("#myform :hidden" )选取< input type="hidden " />、style="display: none"等元素
indexOf	查找某个指定的字符串值在字符串中首次出现的位置

属性过滤选择器：

语法	描述	示例
:enabled	匹配所有可用元素	$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素
:disabled	匹配所有不可用元素	$(" #userform :disabled" )匹配编号输入框
:checked	匹配所有被选中元素（复选框、单项按钮、select 中的option）	$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项
:selected	匹配所有选中的option 元素	$(" #userform :selected" ) 匹配“家乡”中的“北京”选项

表单验证需要综合运用一些元素的事件和方法
这里看些常用的

下面直接来用这些代码

直接来看一些代码实例：

字符串截取
var str="this is javascript";
var selectFirst=str.indexOf("Java");    【返回8】
var selectSecond=str.indexOf("Java",12);        【返回-1】

判断字符串是否含数字
for (var i = 0; i < user.length; i++) 
    var j = user.substring(i, i + 1);     【截取单个字符】
    if (isNaN(j) == false) 
        alert("姓名中不能包含数字");
        return false;
    

案例:1

		 <form id="formRegister" method="post" action="register_success.htm">
			 <dl>
				 <dt>名字：</dt>
				 <dd><input id="fname" type="text"  class="reg_text"  size="24" /><span id='DivFname'></span></dd>
			 </dl>
			 <dl>
				 <dt>姓氏：</dt>
				 <dd><input id="lname" type="text" class="reg_text" size="24" /><span  id='DivName'></span></dd>
			 </dl>
			 <dl>
				 <dt>登录名：</dt>
				 <dd><input name="sname" type="text"  class="reg_text"   size="24" />（可包含 a-z、0-9 和下划线）</dd>
			 </dl>
			 <dl>
				 <dt>密码：</dt>
				 <dd><input id="pass" type="password"  class="reg_text"  size="26" /><span  id='DivPwd'></span></dd>
			 </dl>
			 <dl>
				 <dt>再次输入密码：</dt>
				 <dd><input id="rpass"  type="password" class="reg_text" size="26" /><span id='DivRepwd'></span></dd>
			 </dl>
			 <dl>
				 <dt>电子邮箱：</dt>
				 <dd><input id="email"  type="text" class="reg_text" size="24" /><span  id='DivEmail'></span></dd>
			 </dl>
       </form>
js部分========================
<script>
		$(document).ready(function()
			//提交表单,调用验证函数
			$("#formRegister").submit(function()
				var flag = true;
				if (!checkFname()) flag = false;
				if (!checkName()) flag = false;
				if (!checkEmail()) flag = false;
				if (!checkPass()) flag = false;
				if (!checkRePass()) flag = false;
				return flag;
			)
			//绑定失去焦点事件
			$("#fname").blur(checkFname);
			$("#lname").blur(checkName);
			$("#email").blur(checkEmail);
			$("#pass").blur(checkPass);
			$("#rpass").blur(checkRePass);
		)
        //验证名字
		function checkFname() 
			var $fname = $("#fname");
			var $divID = $("#DivFname");
			$divID.html("");
			if ($fname.val() == "") 
				$divID.html("名字不能为空");
				return false;
			
			for (var i = 0; i < $fname.val().length; i++) 
				var j = $fname.val().substring(i, i + 1)
				if (j >= 0) 
					$divID.html("姓名中不能包含数字");
					return false;
				
			
			return true;
		
		//验证姓氏
		function checkName() 
			var $name = $("#lname");
			var $divID = $("#DivName");
			$divID.html("");
			if ($name.val() == "") 
				$divID.html("姓氏不能为空");
				return false;
			
			for (var i = 0; i < $name.val().length; i++) 
				var j = $name.val().substring(i, i + 1)
				if (j >= 0) 
					$divID.html("姓氏中不能包含数字");
					return false;
				
			
			return true;
		
		//验证Email
		function checkEmail() 
			var $mail = $("#email");
			var $divID = $("#DivEmail");
			$divID.html("");
			if ($mail.val() == "") 
				$divID.html("Email不能为空");
				return false;
			
			if ($mail.val().indexOf("@") == -1) 
				$divID.html("Email格式不正确，必须包含@");
				return false;
			
			if ($mail.val().indexOf(".") == -1) 
				$divID.html("Email格式不正确，必须包含.");
				return false;
			
			return true;
		
		//验证密码
		function checkPass() 
			var $pwd = $("#pass");
			var $divID = $("#DivPwd");
			$divID.html("");
			if ($pwd.val() == "") 
				$divID.html("密码不能为空");
				return false;
			
			if ($pwd.val().length < 6) 
				$divID.html("密码必须等于或大于6个字符");
				return false;
			
			return true;
		
		//验证重复密码
		function checkRePass() 
			var $pwd = $("#pass"); //输入密码
			var $repwd = $("#rpass");  //再次输入密码
			var $divID = $("#DivRepwd");
			$divID.html("");
			if ($pwd.val() != $repwd.val()) 
				$divID.html("两次输入的密码不一致");
				return false;
			
			return true;
		
	</script>

关于正则表达式的方式在这一章=======》gogogo