运维开发网

JQuery实现了表单验证

运维开发网 https://www.qedev.com 2022-05-09 16:29 出处:网络
这篇文章主要为大家详细介绍了jQuery实现表单验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了jQuery实现表单验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用jQuery验证表单以供参考。具体情况如下

register.html

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;注册lt;/titlegt; lt;!--导入jQuery--gt; lt;script src="js/jquery-3.3.1.js"gt;lt;/scriptgt; lt;!--进行表单校验--gt; lt;scriptgt; /* 表单校验: 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() amp;amp; checkPassword() amp;amp; checkEmail() amp;amp; checkName() amp;amp; checkTelephone() amp;amp; checkBirthday()) { // 校验通过,发送ajax请求,提交表单的数据 username=zhangsanamp;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); }) lt;/scriptgt;lt;/headgt;lt;bodygt;lt;divgt; lt;pgt;用户注册lt;/pgt; lt;!--注册表单--gt; lt;div id="errorMsg" style="color:red;text-align: center"gt;lt;/divgt; lt;form id="registerForm" action="registerServlet" method="post"gt; lt;table style="margin-top: 25px;"gt; lt;trgt; lt;td class="td_left"gt; lt;label for="username"gt;用户名lt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="text" id="username" name="username" placeholder="请输入账号"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="password"gt;密码lt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="text" id="password" name="password" placeholder="请输入密码"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="email"gt;Emaillt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="text" id="email" name="email" placeholder="请输入Email"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="name"gt;姓名lt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="text" id="name" name="name" placeholder="请输入真实姓名"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="telephone"gt;手机号lt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="sex"gt;性别lt;/labelgt; lt;/tdgt; lt;td class="td_right gender"gt; lt;input type="radio" id="sex" name="sex" value="男" checkedgt; 男 lt;input type="radio" name="sex" value="女"gt; 女 lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;label for="birthday"gt;出生日期lt;/labelgt; lt;/tdgt; lt;td class="td_right"gt; lt;input type="date" id="birthday" name="birthday" placeholder="年/月/日"gt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td class="td_left"gt; lt;/tdgt; lt;td class="td_right check"gt; lt;input type="submit" class="submit" value="注册"gt; lt;span id="msg" style="color: red;"gt;lt;/spangt; lt;/tdgt; lt;/trgt; lt;/tablegt; lt;/formgt;lt;/divgt;lt;/bodygt;lt;scriptgt; lt;/scriptgt;lt;/htmlgt;

你不用看后台代码,这只是前端交互的需要,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 { Maplt;String, String[]gt; parameterMap = req.getParameterMap(); Setlt;Stringgt; keySet = parameterMap.keySet(); Iteratorlt;Stringgt; 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); }}

效果:


本节代码地址:演示

这就是本文的全部内容。希望对大家的学习有帮助,也希望大家能支持一下

0

精彩评论

暂无评论...
验证码 换一张
取 消