说明:
1. 代码中的js脚本文件路径需替换为自己的目录文件
2. 代码中加入了ajax验证账号是否存在
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>表单验证</title> <style type="text/css"> font { font-size: 10px; } .info { color: #aaaaaa; } .errormsg { color: #ff3030; } .errorinput { border-color: #ff3030; border-width: 1px; } .ok { color: #32cd32; } </style> <script type="text/javascript" src="/airticlemgr/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //账号是否验证过 var accountischecked = false; var accountisok = false; var passwdisok = false; var confirmpwdisok = false; var phoneisok = false; $(function() { // 验证账号 $("#account").focus(function() { focus_checkaccount(); }).keyup( function() { $("#accountmsg").text("支持中文、字母、数字组合").removeclass() .addclass("info"); accountischecked = false; }).blur(function() { blur_checkaccount(); }) // 验证密码 $("#pwd").focus(function() { $("#pwdmsg").text("建议使用数字和字母的组合").removeclass().addclass("info"); }).blur(function() { blur_checkpwd(); blur_confirmpwd(); }); // 验证二次密码 $("#confirmpwd").focus(function() { $("#confirmmsg").text("请再次确认密码").removeclass().addclass("info"); }).blur(function() { blur_confirmpwd(); }); // 验证手机号码 $("#phone").focus(function() { $("#phonemsg").text("建议输入常用手机").removeclass().addclass("info"); }).blur(function() { blur_checkphone(); }) }); function focus_checkaccount() { if (!accountischecked) { $("#accountmsg").text("支持中文、字母、数字组合").removeclass() .addclass("info"); } } function blur_checkaccount() { var account = $("#account").val(); if (account != "") { // 判断account是否验证过 if (!accountischecked) { // 未验证过,则进行验证 ajax_checkaccount(account); } } else { $("#accountmsg").text(""); accountisok = false; } } // ajax请求验证account function ajax_checkaccount(account) { $.get("/airticlemgr/member", { m : "checkaccount", account : account }, function(data) { if ("true" == data) { $("#accountmsg").text("该账号已被注册").removeclass().addclass( "errormsg"); accountisok = false; } else { $("#accountmsg").text("√").removeclass().addclass("ok"); accountisok = true; } }); accountischecked = true; } function blur_checkpwd() { var lpwd = $("#pwd").val().length; if (lpwd > 0) { if (lpwd < 6) { $("#pwdmsg").text("长度在6-20位之间").removeclass().addclass( "errormsg"); passwdisok = false; } else { $("#pwdmsg").text("√").removeclass().addclass("ok"); passwdisok = true; } } else { $("#pwdmsg").text(""); passwdisok = false; } } function blur_confirmpwd() { var pwd = $("#pwd").val(); var confirmpwd = $("#confirmpwd").val(); if (confirmpwd != "") { if (confirmpwd == pwd) { $("#confirmmsg").text("√").removeclass().addclass("ok"); confirmpwdisok = true; } else { $("#confirmmsg").text("两次密码输入不一致").removeclass().addclass( "errormsg"); confirmpwdisok = false; } } else { $("#confirmmsg").text(""); confirmpwdisok = false; } } function blur_checkphone() { var phone = $("#phone").val(); var regix = /^1[34578][0-9]{9}$/; if (phone != "") { if (!regix.test(phone)) { $("#phonemsg").text("手机格式有误").removeclass() .addclass("errormsg"); phoneisok = false; } else { $("#phonemsg").text("√").removeclass().addclass("ok"); phoneisok = true; } } else { $("#phonemsg").text(""); phoneisok = false; } } // 表单验证 function check_form() { if (!accountisok) { if ($("#account").val() == "") { $("#accountmsg").text("请输入账号").removeclass().addclass( "errormsg"); } else { } return false; } if (!passwdisok) { if ($("#pwd").val() == "") { $("#pwdmsg").text("请输入密码").removeclass().addclass("errormsg"); } else { } return false; } if (!confirmpwdisok) { if ($("#confirmpwd").val() == "") { $("#confirmmsg").text("请再次输入密码").removeclass().addclass( "errormsg"); } else { } return false; } if (!phoneisok) { if ($("#phone").val() == "") { $("#phonemsg").text("请输入手机").removeclass().addclass("errormsg"); } else { } return false; } if (accountisok && passwdisok && confirmpwdisok && phoneisok) { alert("欢迎注册"); return true; } else { alert("请检查信息"); return false; } } </script> </head> <body> <h2>会员注册</h2> <form action="/airticlemgr/member?m=regist" method="post" onsubmit="return check_form()"> <table> <tr height="30px"> <td>帐 号:</td> <td><input type="text" id="account" name="account" placeholder="您的登录账号"></td> <td><font id="accountmsg"></font></td> </tr> <tr height="30px"> <td>设置密码:</td> <td><input type="password" id="pwd" name="pwd" placeholder="设置您的密码" maxlength="20"></td> <td><font id="pwdmsg"></font></td> </tr> <tr height="30px"> <td>确认密码:</td> <td><input type="password" id="confirmpwd" name="confirmpwd" placeholder="确认您的密码" maxlength="20"></td> <td><font id="confirmmsg"></font></td> </tr> <tr height="30px"> <td>手 机:</td> <td><input type="text" id="phone" name="phone" placeholder="您的手机号码"></td> <td><font id="phonemsg"></font></td> </tr> <tr height="7px"></tr> <tr> <td colspan="2" align="center"><input type="submit" value="立即注册" style="height: 30px; width: 100%; background-color: #ff3030; color: white; border: 0"> </td> <td></td> </tr> </table> </form> </body> </html>
以上这篇(模仿京东用户注册)用jquery实现简单表单验证,初学者必看就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论