jQuery中的表单验证
表单验证: 通过js代码对表单子项(文本框,密码框,….)的value值(string)进行校验, 就是对字符串操作
表单验证的细节:
1) 按钮是type=”submit”,提交按钮, 提交表单(form), –> 触发一个表单提交的事件: js: onSubmit
Jquery: submit
这个事件绑定的函数返回true,才会提交表单,如果返回false, 阻止提交
2) 普通按钮不能提交表单, 表单(form)对象,有一个submit()(js,jquery), 提交表单
注册验证代码:
<script type="text/javascript"> $(function () { //验证Email function checkEmail() { var mail = $.trim($("#email").val()); var $divID = $("#DivEmail"); // 需要,把div中之前的文本清空 $divID.html(""); if (mail == "") { $divID.html("Email不能为空"); return false; } if (mail.indexOf("@") == -1) { $divID.html("Email格式不正确,必须包含@"); return false; } if (mail.indexOf(".") == -1) { $divID.html("Email格式不正确,必须包含."); return false; } return true; } //验证输入密码 function checkPass() { var pwd = $("#pwd").val(); var $divID = $("#DivPwd"); $divID.html(""); if (pwd == "") { $divID.html("密码不能为空"); return false; } if (pwd.length < 6) { $divID.html("密码必须等于或大于6个字符"); return false; } return true; } //验证重复密码 function checkRePass() { var pwd = $("#pwd").val(); //输入密码 var repwd = $("#repwd").val(); //再次输入密码 var $divID = $("#DivRepwd"); $divID.html(""); if (pwd != repwd) { $divID.html("两次输入的密码不一致"); return false; } return true; } //验证用户名 function checkUser() { var user = $.trim($("#user").val()); var $divID = $("#DivUser"); $divID.html(""); if (user == "") { $divID.html("姓名不能为空"); return false; } // for (var i = 0; i < $user.val().length; i++) { // var j = user.substring(i, i + 1) // if (!isNaN(j)) { // $divID.html("姓名中不能包含数字"); // return false; // } // } var nameReg = /^[A-z\u4e00-\u9fa5]+$/; if(!nameReg.test(user)){ $divID.html("姓名中不能包含数字"); return false; } return true; } $("#myform").submit(function () { return checkEmail() && checkPass() && checkRePass() && checkUser(); }); //给需要验证的表单项添加失去焦点事件 $("#email").blur(function(){ checkEmail(); $(this).css("border","1px solid red"); }); $("#pwd").blur(function(){ checkPass(); }); $("#repwd").blur(function(){ checkRePass(); }); $("#user").blur(function(){ checkUser(); }); }); </script>