How to implement form validation using JQuery? What should be done specifically?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement form validation using JQuery? What should be done specifically?

亚连

Jun 13, 2018 am 09:59 AM

jqueryJingdongregisteruserform validation

Below I will share an article for beginners (imitating JD user registration) to implement simple form verification using JQuery. It has a good reference value and I hope it will be helpful to everyone.

Instructions:

1. The js script file path in the code needs to be replaced with your own directory file

2. Ajax is added to the code to verify whether the account exists

<%@ 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 id="会员注册">会员注册</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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to set multiple Classes using Vue

How to get the value of the multi-select box value in post in SpringMVC ( Code example)

jQuery Checkbox selection and value passing example in SpringMVC_jquery

The above is the detailed content of How to implement form validation using JQuery? What should be done specifically?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

淘宝和京东有什么区别Aug 18, 2022 pm 05:47 PM

区别：1、淘宝网是C2C网购平台，而京东是B2C平台。2、京东采用得是价值链整合模式，淘宝则采用的是开放平台模式。3、京东采用自买自卖的模式，赚取商品中间的差价，通过低收益来获取规模化的销量；淘宝则并不参与商品的实际销售和服务，商品的销售以及服务都是由淘宝卖家直接负责的。4、京东有自己的物流平台，采用的是分布式库存管理；淘宝依赖于第三方物流平台，采用的是集约式库存管理。

京东官方旗舰店和京东自营旗舰店的区别是什么Oct 17, 2022 pm 02:53 PM

区别：1、京东自营是京东公司自己经营的店面，从品牌厂家进货到京东仓库，然后在京东平台销售给消费者；而京东官方旗舰店是各大品牌商家借助京东平台销售自家产品。2、京东自营使用京东物流，发货快；而京东官方旗舰店则是由品牌发货。3、京东自营的产品都是储存在京东自己的仓储中心里面，而京东官方旗舰店的商品是储备于商家自己的仓库里面。4、京东自营的模式是B2B和B2C，而官方旗舰店是B2C。

京东公司全称是什么Oct 11, 2022 pm 04:05 PM

京东公司全称是“北京京东世纪贸易有限公司”，是一家综合网络零售企业，公司旗下产业京东商城是中国电子商务领域最受消费者欢迎和最具有影响力的电子商务网站之一，拥有在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等12大类数万个品牌商品。

京东自营和京东国际自营有什么区别Oct 17, 2022 pm 03:30 PM

区别：1、京东自营包括京东国际自营和京东国内商家。2、京东自营分为国内产品和国外产品，京东国际自营也是自营店，产品直接从海外采买。3、京东自营是京东集团很多子公司在京东商城平台上销售，而京东商城与京东国际自营也是一种合作关系；京东国际自营是京东集团子公司之一，是一家在境外注册的境外销售公司。

京东物流单号jdvc是什么业务Nov 01, 2022 am 11:17 AM

jdvc是京东快递业务。京东快递是京东物流的服务之一，其主要业务是为京东商城自营的产品进行运输配送，京东商场在全国各地都有建立保税仓，将买家的订单分配到就近的仓库，再由京东快递打包运输，一至三天即可送到。京东快递除了运输商务快递，还开通了个人运输，可以通过小程序、APP、和公众号预约下单，价格比其他快递公司更便宜，大约2～3天左右即可送货上门。

京东可以用支付宝支付吗Jul 07, 2022 am 11:37 AM

京东不可以用支付宝支付，在京东的支付界面“京东收银台”中没有“支付宝”的付款渠道，因为京东和支付宝并没有支付合作关系。京东支持的付款方式有：微信支付、云闪付、银行卡支付、货到付款、微信好友代付。

爬虫实战：用 PHP 爬取京东商品信息Jun 13, 2023 am 11:11 AM

在当今的电商时代，京东作为中国最大的综合电商之一，每日上架的商品数量甚至可以达到数万种。对于广大的消费者来说，京东提供了广泛的商品选择和优势的价格优惠。但是，有些时候，我们需要批量获取京东商品信息，快速筛选、比较、分析等等。这时候，我们就需要用到爬虫技术了。在本篇文章中，我们将会介绍利用PHP语言编写爬虫，帮助我们快速爬取京东商品信息的实现。准备工作首先，我

京东在线配镜流程Nov 08, 2023 pm 03:19 PM

京东在线配镜流程是：1、挑选镜架；2、挑选镜片；3、定制镜片；4、确认订单；5、支付订单；6、等待配送；7、验货与试戴；8、确认收货。在配镜前最好先去医院或专业的眼镜店进行验光，了解自己的近视度数和瞳距等信息，以便选择合适的镜片参数。京东的配镜服务可能会有所不同，具体流程和价格等信息可以在其官方网站上查询。

See all articles