<!DOCTYPE html>
<html><head><title>手工实现表单验证</title><meta charset="utf-8" /><script src="scripts/jquery-1.11.3.js"></script></head><body><fieldset><legend>用户注册页面</legend><!--在javascript代码中,如何获取form表单* 通过id属性值获取表单* 通过name属性值获取表单* document.forms - 获取当前页面所有表单元素(数组)* document.表单名称<form>元素* id属性 - 表单标识* name属性 - 表单名称* action属性 - 提交表单的地址* method属性 - 请求类型(GET或POST)<form>表单提交的方式* 在表单定义submit按钮* 表单绑定onsubmit事件* <form>元素具有submit()方法--><form id="myform" name="myform" οnsubmit="return formValidator();"><table><tr><td>用户名:</td><td><input type="text" id="user"></td><!-- 显示提示内容 --><td><div id="userTip"></div></td></tr><tr><td>密码:</td><td><input type="password" id="pwd"></td><!-- 显示提示内容 --><td><div id="pwdTip"></div></td></tr><tr><td>确认密码:</td><td><input type="password" id="repwd"></td><!-- 显示提示内容 --><td><div id="repwdTip"></div></td></tr><tr><td>email地址:</td><td><input type="text" id="email"></td><!-- 显示提示内容 --><td><div id="emailTip"></div></td></tr><tr><td></td><td><input type="submit" id="rigist" value="注册"></td><td></td></tr></table></form></fieldset><script>/** 表单验证需求* * 用户名 - 不能为空,只能输入英文+数字,长度在6-12之间* * 密码 - 不能为空,只能输入英文,长度在6-8之间* * 确认密码 - 与密码的要求一致,两次密码输入一致* * email - 不能为空** 效果* * 获取焦点事件 - 给出输入提示内容* * 失去焦点事件 - 完成对应元素的验证* * 验证成功 - 给出输入正确提示* * 验证失败 - 给出输入错误提示* * 当提交表单之前,保证表单内所有元素全部验证通过的*/function userValidator(){// 定义正则表达式var regExp = /^[a-zA-Z0-9]{6,12}$/;var $myval = $("#user").val();// a. 不能为空if($myval == "" || $myval == null){$("#userTip").text("用户名不能为空.").css({"color" : "red","font-weight" : "bold"});return false;}// b. 英文+数字,长度6-12else if(!regExp.test($myval)){$("#userTip").text("用户名输入错误.").css({"color" : "red","font-weight" : "bold"});return false;}// 输入正确else{$("#userTip").text("用户名输入正确.").css({"color" : "green","font-weight" : "bold"});return true;}}function pwdValidator(){// 定义正则表达式var regExp = /^[a-zA-Z]{6,8}$/;var $myval = $("#pwd").val();// a. 不能为空if($myval == "" || $myval == null){$("#pwdTip").text("密码不能为空.").css({"color" : "red","font-weight" : "bold"});return false;}else if(!regExp.test($myval)){$("#pwdTip").text("密码输入错误.").css({"color" : "red","font-weight" : "bold"});return false;}else{$("#pwdTip").text("密码输入正确.").css({"color" : "green","font-weight" : "bold"});return true;}}function repwdValidator(){// 定义正则表达式var regExp = /^[a-zA-Z]{6,8}$/;var $myval = $("#repwd").val();var $pwd = $("#pwd").val();// a. 不能为空if($myval == "" || $myval == null){$("#repwdTip").text("密码不能为空.").css({"color" : "red","font-weight" : "bold"});return false;}else if(!regExp.test($myval)){$("#repwdTip").text("密码输入错误.").css({"color" : "red","font-weight" : "bold"});return false;}// 两次密码输入一致else if($myval != $pwd){$("#repwdTip").text("两次密码输入不一致.").css({"color" : "red","font-weight" : "bold"});return false;}else{$("#repwdTip").text("密码输入正确.").css({"color" : "green","font-weight" : "bold"});return true;}}function emailValidator(){if($("#email").val() == "" || $("#email").val() == null){$("#emailTip").text("email输入错误.").css({"color" : "red","font-weight" : "bold"});return false;}else{$("#emailTip").text("email输入正确.").css({"color" : "green","font-weight" : "bold"});return true;}}// 1. 用户名验证$("#user").focus(function(){// 给出输入提示内容$("#userTip").text("请输入英文或数字,长度在6至12之间.").css({"color" : "black","font-weight" : "normal"});}).blur(userValidator);// 2. 密码验证$("#pwd").focus(function(){$("#pwdTip").text("请输入英文,长度在6至8之间.").css({"color" : "black","font-weight" : "normal"});}).blur(pwdValidator);// 3. 确认密码验证$("#repwd").focus(function(){$("#repwdTip").text("请输入英文,长度在6至8之间.").css({"color" : "black","font-weight" : "normal"});}).blur(repwdValidator);// 4. email验证$("#email").focus(function(){$("#emailTip").text("email不能为空.").css({"color" : "black","font-weight" : "normal"});}).blur(emailValidator);/** 5. 提交表单前,验证所有元素验证通过* * 为<form>表单元素绑定onsubmit事件* * 事件对象时,return value(Boolean值)* * 是否阻止页面元素的默认行为* * false,表示阻止元素的默认行为* * 定义formValidator()必须具有返回值(Boolean)*/function formValidator(){// 判断表单内所有元素验证全部通过if(userValidator()&&pwdValidator()&&repwdValidator()&&emailValidator()){//alert("表单验证成功!");return true;}else{//alert("表单验证失败!");return false;}}</script></body>
</html>
html页面：
![UserWarning: findfont: Font family [‘sans-serif‘] not found. Falling back to DejaVu Sans](https://img-blog.csdnimg.cn/af225708a8ad4a39ab93895ae61fffb6.png)
![findfont: Font family [‘Times New Roman‘] not found. Falling back to DejaVu Sans.字体安装](https://img-blog.csdnimg.cn/2021021920421043.png)
