jQuery实现表单验证
更新时间：2021年06月17日 17:08:26 作者：二木成林
这篇文章主要为大家详细介绍了jQuery实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用jQuery实现表单验证，供大家参考，具体内容如下
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<!--导入jQuery-->
<script src="js/jquery-3.3.1.js"></script>
<!--进行表单校验-->
<script>
/*
表单校验：
1.用户名：单词字符，长度8到20位
2.密码：单词字符，长度8到20位
3.email：邮件格式
4.姓名：非空
5.手机号：手机号格式
6.出生日期：非空
*/
// 校验用户名
// 单词字符，长度8到20位
function checkUsername() {
// 1.获取用户名值
var username = $("#username").val();
// 2.定义校验正则
var reg_username = /^\w{8,20}$/;
// 3.判断是否满足校验要求，并给出提示信息
var flag = reg_username.test(username);
if (flag) {
// 用户名合法
$("#username").css("border", "");
} else {
// 用户名非法，加一个红色边框
$("#username").css("border", "1px solid red");
}
// 4.返回是否通过校验
return flag;
}
// 校验密码
function checkPassword() {
//1.获取密码值
var password = $("#password").val();
//2.定义正则
var reg_password = /^\w{8,20}$/;
//3.判断，给出提示信息
var flag = reg_password.test(password);
if (flag) {
//密码合法
$("#password").css("border", "");
} else {
//密码非法,加一个红色边框
$("#password").css("border", "1px solid red");
}
// 4.返回校验是否通过
return flag;
}
// 校验邮箱
function checkEmail() {
//1.获取邮箱
var email = $("#email").val();
//2.定义正则 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判断
var flag = reg_email.test(email);
if (flag) {
$("#email").css("border", "");
} else {
$("#email").css("border", "1px solid red");
}
// 4.返回校验是否通过
return flag;
}
// 校验姓名
function checkName() {
// 1.获取姓名
var name = $("#name").val();
// 2.判断非空并返回校验是否通过
if (typeof name == "undefined" || name == null || name == "") {
$("#name").css("border", "1px solid red");
return false;
} else {
$("#name").css("border", "");
return true;
}
}
// 校验手机号
function checkTelephone() {
// 1.获取手机号
var telephone = $("#telephone").val();
// 2.定义正则
var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
// 3.判断
var flag = reg_tel.test(telephone);
if (flag) {
$("#telephone").css("border", "");
} else {
$("#telephone").css("border", "1px solid red");
}
// 4.返回校验是否通过
return flag;
}
// 校验出生日期
function checkBirthday() {
// 1.获取出生日期
var birthday = $("#birthday").val();
// 2.判断非空并返回校验是否通过
if (typeof birthday == "undefined" || birthday == null || birthday == "") {
$("#name").css("border", "1px solid red");
return false;
} else {
$("#name").css("border", "");
return true;
}
}
// 进行校验
$(function () {
//当表单提交时，调用所有的校验方法
$("#registerForm").submit(function () {
// 如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
// 1.发送数据到服务器
if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
// 校验通过,发送ajax请求，提交表单的数据 username=zhangsan&password=123
$.post("registerServlet", $(this).serialize(), function (data) {
if (data.flag) {
// 注册成功，跳转到成功页面
alert("注册成功！");
} else {
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不让页面跳转
return false;
});
//当某一个组件失去焦点是，调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
})
</script>
</head>
<body>
<div>
<p>用户注册</p>
<!--注册表单-->
<div id="errorMsg" style="color:red;text-align: center"></div>
<form id="registerForm" action="registerServlet" method="post">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
</script>
</html>
后台处理代码也可以不看，只是前后端进行交互需要，RegisterServlet.java
package com.demo.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Map<String, String[]> parameterMap = req.getParameterMap();
Set<String> keySet = parameterMap.keySet();
Iterator<String> iterator = keySet.iterator();
while (iterator.hasNext()) {
String key = iterator.next();
System.out.println(key + ":" + parameterMap.get(key)[0]);
}
// String str="{flag:true,errorMsg:'注册失败'}";// 错误范例
String str="{\"flag\":\"true\",\"errorMsg\":\"注册失败\"}";
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
效果：
本节代码地址：Demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jquery实现的回旋滚动效果完整实例【附demo源码下载】
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery.Callbacks()回调函数队列用法,结合实例形式详细分析了jQuery.Callbacks()回调函数队列的功能、控制标志含义与相关注意事项,需要的朋友可以参考下2016-06-06
今儿是脚本之家小编给大家总结的jquery中attr()和prop()方法的区别，感兴趣的朋友参考下2018-05-05
这篇文章主要介绍了jquery清空input标签的值,清除标签里面的内容,清除input标签的值,可以通过直接将input标签的值设置为空来实现,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
基于jquery的无刷新分页技术，需要的朋友可以参考下。2011-06-06
这篇文章主要介绍了jQuery简单实现禁用右键菜单的方法，非常的简单实用，这里分享给大家，有需要的小伙伴直接拿走使用。2015-03-03
这篇文章主要介绍了JQuery上传插件Uploadify使用，文章给出详细的步骤来实现一个简单的上传功能，感兴趣的小伙伴们可以参考一下2016-01-01
使用2句代码简单实现jquery动画的跳到顶部和底部；当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离，具体的实现如下，感兴趣的朋友可以参考下2013-07-07
这篇文章主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下2015-06-06
json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法。2014-06-06
最新评论