js实现表单校验功能 js实现表单校验功能

【js实现表单校验功能】本文实例为大家分享了js实现表单校验功能的具体代码，供大家参考，具体内容如下
1、所用到的三个事件：
onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onkeyup（按键抬起的事件）
2、利用事件触发函数，函数中执行校验的信息。
3、利用checkform判断表单中的内容是否规范，如果规范submit按钮可以提交表单信息。
简单效果：

文章图片

文章图片

文章图片

文章图片

form中的代码：

用户名
密码
确认密码
邮箱
手机号

js中的：

function shoeTips(spanId, tips) { var span = document.getElementById(spanId); span.innerHTML = tips; }/** * 校验用户名 */function hint() { var value = https://www.it610.com/article/document.getElementById("value").value; var hint = document.getElementById("hint"); if(value.length < 6) {hint.innerHTML = "用户名太短"; return false; } else {hint.innerHTML = "用户名合格"; return true; }} function hint_hide() { var hint = document.getElementById("hint"); hint.innerHTML = ""; }/** * 校验密码 */ function checkPass() { var value = https://www.it610.com/article/document.getElementById("pass_value").value; var hint = document.getElementById("pass_hint"); if(value.length < 6) {hint.innerHTML = "密码太短"; return false; } else {hint.innerHTML = "密码格式合格"; return true; }} function pass_hide() { var hint = document.getElementById("pass_hint"); hint.innerHTML = ""; }/*** * 确认密码的校验 */function checkPassPass() { var papavalue = https://www.it610.com/article/document.getElementById("passpass_value").value; var value = https://www.it610.com/article/document.getElementById("pass_value").value; var papahint = document.getElementById("passpass_hint"); if(papavalue != value) {papahint.innerHTML = "两次密码不一致"; return false; } else {papahint.innerHTML = ""; return true; }} function passpass_hide() { var papahint = document.getElementById("passpass_hint"); papahint.innerHTML = ""; }/** * 校验邮箱 */function checkEmail(strEmail) {var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if ( emailReg.test(strEmail) ) {return true; }else {//alert("您输入的Email地址格式不正确！"); return false; }}; function emailCheck() { var emailValue = https://www.it610.com/article/document.getElementById("email").value; var email_hint = document.getElementById("email_hint"); var flag = checkEmail(emailValue); if(flag) {email_hint.innerHTML = "邮箱格式正确"; return true; } else {email_hint.innerHTML = "邮箱格式错误"; return false; }} function emailHide() { var email_hint = document.getElementById("email_hint"); email_hint.innerHTML = ""; }/** * 校验手机号 */function checkMobile( strMobile ){ //13588888888var regu = /^[1][345678][0-9]{9}$/; var re = new RegExp(regu); if (re.test(strMobile)) {return true; }else {return false; }}; function phoneCheck() { var phone = document.getElementById("phone").value; var phone_hint = document.getElementById("phone_hint"); var flag = checkMobile(phone); if(flag) {phone_hint.innerHTML = "手机号格式正确"; return true; } else {phone_hint.innerHTML = "手机号格式错误"; return false; }} function phoneHide() { var phone_hint = document.getElementById("phone_hint"); phone_hint.innerHTML = ""; } function checkForm() { var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck(); return flag; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。