核心产品
帮助中心
时间：2021-05-28
说明：
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请求验证accountfunction 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实现简单表单验证,初学者必看就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：1.html表单结构：包含需要校验的表单元素；2.js逻辑控制：在需
实现用户注册表单验证实现方法很简单的。在模型里边设置一个方法,定义具体表单验证规则我们rules()方法对表单数据进行验证时候，rules（）方法怎么在YII框
有时在我们注册账户、登陆系统时，当所有验证通过方可提交这就需要Jquery来实现表单验证，今天分享给小伙伴们一段基于Jquery实现表单验证的代码。Reg.st
jquery如何实现简单的表单验证，我们先跟大家分享一下实现思路。大概思路:先为每一个required添加必填的标记，用each()方法来实现。在each()方
很多刚在淘宝店开张的初学者不太了解淘宝店的装修，商店街总是有特别优秀的店，初学者们想模仿这些优秀的店，以它们为模板，怎么模仿别人的淘宝店的模板呢？
