JQUERY之表单验证案例
<!--
需求：
用户注册页面要有用户名、密码、确认密码、邮箱
用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
密码框：密码不能为空，六到八位数字或字母的组合
确认密码框：确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致
邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
--> 效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JQUERY</title>
<script src="jquery-3.3.1.js"></script>
</head>
<fieldset>
<legend>用户注册页面</legend>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username"></td>
<td>
<div id="usernameTip"></div>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd"></td>
<td>
<div id="pwdTip"></div>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="rePwd"></td>
<td>
<div id="rePwdTip"></div>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" id="user_email" /></td>
<td>
<div id="emailTip"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="button" value="submit" ></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<body>
</body> </html>
<script type="text/javascript"> function userNameJudge() {判断用户名输入是否合法
var reg = /^[A-Za-z0-9]{6,12}$/;
if (!$("#username").val()) {//判断用户名不能为空
$("#usernameTip").text("用户名不能为空.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else if (!reg.test($("#username").val())) {
$("#usernameTip").text("用户名格式错误.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else {
$("#usernameTip").text("用户名格式正确.").css({
"color": "green",
});
return true;
}
} function pwdJudge() {//判断密码框输入是否合法
var reg = /^[0-9a-zA-Z]{6,8}$/;
if (!$("#pwd").val()) {
$("#pwdTip").text("密码不能为空.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else if (!reg.test($("#pwd").val())) {
$("#pwdTip").text("密码格式错误，请重新输入.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else {
$("#pwdTip").text("密码格式正确.").css({
"color": "green"
});
return true;
}
} function rePwdJudge() {判断确认密码框输入是否合法
var reg = /^[0-9a-zA-Z]{6,8}$/;
if (!$("#rePwd").val()) {
$("#rePwdTip").text("密码不能为空.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else if (!reg.test($("#rePwd").val())) {
$("#rePwdTip").text("密码格式错误，请重新输入.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else if ($("#pwd").val() != $("#rePwd").val()) {
$("#rePwdTip").text("两次输入密码不一致.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else {
$("#rePwdTip").text("确认密码格式正确.").css({
"color": "green"
});
return true;
}
} function emailJudge() {//判断邮箱输入是否合法
var reg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if (!$("#user_email").val()) {
$("#emailTip").text("邮箱不能为空.").css({
"color": "red",
"font-weight": "bold"
});
return false;
} else if(!reg.test($("#user_email").val())){//补充说明：.indexOf("@")<0可判断字符串中是否包含指定内容，这里的指定内容是@
$("#emailTip").text("请输入正确的邮箱格式.").css({
"color": "red",
"font-weight": "bold"
});
return false;
}else {
$("#emailTip").text("邮箱正确.").css({
"color": "green"
});
return true;
}
} /*
*用户名不能为空，且必须为数字或字母的6到8位的组合
*/
$("#username").focus(function () {
$("#usernameTip").text("用户名只能为6到12位英文或数字的组合.").css({
"color": "green"
});
}).blur(userNameJudge); /*
*密码不能为空，六到八位数字或字母的组合
*/
$("#pwd").focus(function () {
$("#pwdTip").text("密码为六到八位数字或字母的组合.").css({
"color": "green"
});
}).blur(pwdJudge); /*
*确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致
*/
$("#rePwd").focus(function () {
$("#rePwdTip").text("密码为六到八位数字或字母的组合.").css({
"color": "green"
});
}).blur(rePwdJudge); /*
*邮箱需要输入正确的邮箱格式并且不能为空
*/
$("#user_email").focus(function () {
$("#emailTip").text("请输入正确的邮箱格式.").css({
"color": "green"
});
}).blur(emailJudge); //提交按钮，若是所有文本款的内容都是正确格式则提交，否则不提交
$("#button").click(function () {
if (userNameJudge() && pwdJudge() && rePwdJudge()&& emailJudge() ) {
alert("验证成功");
} else {
alert("验证失败");
}
}); </script>
JQUERY之表单验证案例的更多相关文章
- jQuery表单验证案例
目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
随机推荐
- Ignite(三): Ignite VS Spark
参考:https://www.itcodemonkey.com/article/9613.html gnite 和 Spark,如果笼统归类,都可以归于内存计算平台,然而两者功能上虽然有交集,并且 I ...
- Nginx 配置location root 转自https://blog.csdn.net/rofth/article/details/78581617
nginx指定文件路径有两种方式root和alias,root与alias主要区别在于nginx如何解释location后面的uri,这会使两者分别以不同的方式将请求映射到服务器文件上. 最基本的区别 ...
- Django-Form组件之字段
Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 2 3 4 5 6 7 8 9 10 1 ...
- 图像三维灰度分布图——matlab
p=imread('C:\Users\wangd\Documents\MATLAB\1.jpg'); g=rgb2gray(p); % 转为灰阶图 gg=double(g); % 转为数值矩阵 gg= ...
- sort简单用法
-u 去重## 查看文件内容cat test_sort.txt ## sort -u 去重cat test_sort.txt |sort -u----------------------------- ...
- mybatis的逆向工程和中文注解
由于MyBatis Generator自带了生成注释的功能,但是,是英文的而且生成的根本无法理解,所以可以通过,修改他的源码来实现生成中文的注释,具体方式有以下几种: 1) 自定义CommentGen ...
- 如何重置Gitlab root用户密码
一.切换到root用户 sudo su 二.进入gitlab控制台 gitlab-rails console production 三.查找用户对象 user = User.).first 四.重置密 ...
- JavaScript最后的课程笔记
一.快捷位置和尺寸 DOM已经提供给我们计算后的样式,但是还觉得不方便,所以DOM又提供给我们一些API: ele.offsetLeft ele.offsetTop ele.offsetWidth e ...
- (最详细)小米Note 2的usb调试模式在哪里开启的教程
当我们使用安卓手机链接Pc的时候,或者使用的有些工具比如我们学院营销团队当使用的工具引号精灵,之前使用的老版本就需要开启USB开发者调试模式下使用,现当新版本不需要了,如果手机没有开启USB开发者调试 ...
- 基于STM8的UART发送和中断接收---STM8-第二章
1. 综述 UART的基础知识,通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART,是一种异步收发传输器. 做软件开发的人都 ...