Rumah > hujung hadapan web > tutorial js > 用JQuery如何实现表单验证,具体应该怎么做?

用JQuery如何实现表单验证,具体应该怎么做?

亚连
Lepaskan: 2018-06-13 09:59:07
asal
1759 orang telah melayarinya

下面我就为初学者们分享一篇(模仿京东用户注册)用JQuery实现简单表单验证,具有很好的参考价值,希望对大家有所帮助。

说明:

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>
Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用Vue如何设置多个Class

在SpringMVC中post如何获取多选框value的值(代码实例)

jQuery+SpringMVC中的复选框选择与传值实例_jquery

Atas ialah kandungan terperinci 用JQuery如何实现表单验证,具体应该怎么做?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan