jquery表单验证提交,最全代码

2022/6/21 4:20:04

本文主要是介绍jquery表单验证提交,最全代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    今天给大家带来jquery表单验证提交,首先说明下代码中的js脚本文件路径需替换为自己的目录文件,并且代码中加入了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表单验证提交的全部代码,更多内容干货可关注慕课网~




这篇关于jquery表单验证提交,最全代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程