注册验证（jquery）

最新推荐文章于 2023-04-23 18:55:06 发布
最新推荐文章于 2023-04-23 18:55:06 发布
阅读量1.2k 收藏 16
点赞数 2
分类专栏： Java Web 文章标签： html web java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yL10911/article/details/119061123
版权

注册验证（jquery）

表单

<style type="text/css">
		span{
			color: red;
		}
</style>
<form action="http://localhost:8080">
			<table>
				<tr>
					<td>用户名称：</td>
					<td>
						<input type="text" id="name" placeholder="请输入用户名" />
					</td>
					<td>
						<span id="namespan"></span>
					</td>
				</tr>
				<tr>
					<td>用户密码：</td>
					<td>
						<input type="password" id="password" placeholder="请输入用户密码" />
					</td>
					<td>
						<span id="passwordspan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" id="repassword" placeholder="请输入确认密码" />
					</td>
					<td>
						<span id="repasswordspan"></span>
					</td>
				</tr>
				<tr>
					<td>用户邮箱：</td>
					<td>
						<input type="text" id="email" placeholder="请输入用户邮箱" />
					</td>
					<td>
						<span id="emailspan"></span>
					</td>
				</tr>
				<tr>
					<td>用户地址：</td>
					<td>
						<input type="text" id="adress" placeholder="请输入用户地址" />
					</td>
					<td>
						<span id="adressspan"></span>
					</td>
				</tr>
			</table>
			<div>
				<button type="submit" id="sub" >注册</button>
			</div>
		</form>

效果图
在这里插入图片描述

点击验证

用户名验证
<script type="text/javascript" src="./jquery/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#sub").click(function () {
				//验证用户名
				var nameText=$("#name").val();
				//正则
				patt=/^\w{5,12}$/;
				if (!patt.test(nameText)){
					$("#namespan").text("用户名格式错误！");
					return false;
				}
				//正确要把红字去掉
				$("#namespan").text("");
			});
		});
	</script>

效果图（通过点击后判断）
在这里插入图片描述

用户密码验证
	//验证用户密码
	var passwordText=$("#password").val();
	patt=/^\w{5,12}$/;
	if (!patt.test(passwordText)){
		$("#passwordspan").text("用户密码格式错误！");
		return false;
	}
	//正确要把红字去掉
	$("#passwordspan").text("");
确认密码验证
	//验证确认密码
	var passwordText=$("#password").val();
	var repasswordText=$("#repassword").val();
	if (passwordText!=repasswordText){
		$("#repasswordspan").text("确认密码和用户密码不一致！");
		return false;
	}
	//正确要把红字去掉
	$("#repasswordspan").text("");
用户邮件验证
	//验证邮箱
	var emailText=$("#email").val();
	patt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	if (!patt.test(emailText)){
		$("#emailspan").text("用户邮箱格式错误！");
		return false;
	}
	//正确要把红字去掉
	$("#emailspan").text("");
整体代码
<style type="text/css">
		span{
			color: red;
		}
	</style>
	<script type="text/javascript" src="./jquery/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#sub").click(function () {
				//验证用户名
				var nameText=$("#name").val();
				patt=/^\w{5,12}$/;
				if (!patt.test(nameText)){
					$("#namespan").text("用户名格式错误！");
					return false;
				}
				//正确要把红字去掉
				$("#namespan").text("");

				//验证用户密码
				var passwordText=$("#password").val();
				patt=/^\w{5,12}$/;
				if (!patt.test(passwordText)){
					$("#passwordspan").text("用户密码格式错误！");
					return false;
				}
				//正确要把红字去掉
				$("#passwordspan").text("");

				//验证确认密码
				var passwordText=$("#password").val();
				var repasswordText=$("#repassword").val();
				if (passwordText!=repasswordText){
					$("#repasswordspan").text("确认密码和用户密码不一致！");
					return false;
				}
				//正确要把红字去掉
				$("#repasswordspan").text("");

				//验证邮箱
				var emailText=$("#email").val();
				patt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
				if (!patt.test(emailText)){
					$("#emailspan").text("用户邮箱格式错误！");
					return false;
				}
				//正确要把红字去掉
				$("#emailspan").text("");

			});
		});
	</script>

	<div>
		<form action="http://localhost:8080">
			<table>
				<tr>
					<td>用户名称：</td>
					<td>
						<input type="text" id="name" placeholder="请输入用户名" />
					</td>
					<td>
						<span id="namespan"></span>
					</td>
				</tr>
				<tr>
					<td>用户密码：</td>
					<td>
						<input type="password" id="password" placeholder="请输入用户密码" />
					</td>
					<td>
						<span id="passwordspan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" id="repassword" placeholder="请输入确认密码" />
					</td>
					<td>
						<span id="repasswordspan"></span>
					</td>
				</tr>
				<tr>
					<td>用户邮箱：</td>
					<td>
						<input type="text" id="email" placeholder="请输入用户邮箱" />
					</td>
					<td>
						<span id="emailspan"></span>
					</td>
				</tr>
				<tr>
					<td>用户地址：</td>
					<td>
						<input type="text" id="adress" placeholder="请输入用户地址" />
					</td>
					<td>
						<span id="adressspan"></span>
					</td>
				</tr>
			</table>
			<div>
				<button type="submit" id="sub" >注册</button>
			</div>
		</form>
	</div>

自动验证

用户名验证
//只需要修改第一排
//$("#sub").click(function () {
$("#name").blur(function () {
				//验证用户名
				var nameText=$("#name").val();
				patt=/^\w{5,12}$/;
				if (!patt.test(nameText)){
					$("#namespan").text("用户名格式错误！");
					return false;
				}
				//正确要把红字去掉
				$("#namespan").text("");

整理：
尚硅谷

yL晔
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用户登录注册页面jQuery验证
Cc__xac__xac的博客
09-20 5651
登录                $(function () {         $("#username").blur(function(){             $("#names").empty();            var name = $(this).val();             if(name=="" || name==null){       
【基础】使用JavaScript&jQuery进行注册页面的表单验证
weixin_42886104的博客
01-15 1646
本文完成于JavaScript和jQuery的学习时间，该作品纯手工渲染，未使用正则表达式。欢迎各位提出意见交流 效果图： 功能如下： 1、姓名和姓氏不能为空、不能含有数字 2、密码大于6位 3、两次密码相同 4、电子邮箱含有@. 源码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &...
JQuery用户注册表单验证
Sirius小鑫的博客
11-22 2847
使用jquery编写代码实现用户注册表单的验证功能：代码地址。
使用jQuery写一个注册界面
weixin_64674481的博客
04-23 1575
4. 邮箱必须包含.com和@符号，@符号后必须是：gmail、163、qq、woniu其中之一；写一个注册页面，包含用户名、密码、二次输入密码、邮箱地址。5. 用户名、密码、二次输入密码、邮箱都不能为空。1. 用户名必须包含英文字母和数字；2. 密码必须大于6位；3. 两次密码必须一致；
Jquery方式实现表单验证的注册界面
weixin_42152880的博客
10-09 1237
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--这里的顺序不能乱,否则样式会出不来--&gt; &lt;script src="js/jquery-1.8.2.min
jQuery.validate验证功能--有道笔记整理
want_water_fish的博客
11-19 499
Query Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery
jquery实现网站注册页面验证信息
04-04
用jquery实现网站注册页面验证信息，内容很完善的哦
jQuery正则验证注册页面经典实例
10-19
主要介绍了jQuery正则验证注册页面功能,涉及针对用户名、密码、邮箱、手机号等的正则验证操作技巧,需要的朋友可以参考下
jquery注册验证实例会员注册表单验证代码
11-11
jquery注册验证实例会员注册表单验证代码
jquery动态注册验证
06-01
可根据需要，改字体颜色和大小 以及文本框的颜色和大小
jQuery仿京东会员注册页面表单验证代码
06-11
jQuery仿京东会员注册页面表单验证代码是一款清爽简洁的京东注册界面，带有注册成功后的界面代码。
用JQuery用户注册验证小例子
01-29
Jquery验证体验,效果好,代码量小更适合与快速开发的需要
用户注册验证JQuery插件及实例
02-16
用户注册验证JQuery插件及实例 这一套框架写的比较好，而且有Demo，稍微阅读以下代码就会使用
jQuery仿京东注册表单验证代码
06-24
jQuery仿京东注册表单验证代码是一款清爽简洁的京东注册界面，带有注册成功后的界面代码。
JQuery学习笔记
一个保安的自由之路
07-12 202
482 jQuery_$符号的作用 $(function () { $("tr:odd").css("backgroundColor","red"); $("tr:even").css("backgroundColor","gold"); }) $(function () { }相当于window.onload = function(){} $(“tr:odd”) 相当于document.getElementsByTagName(“tr”); 483 基本选择器 ID选择器js对象和JQ如何
Jquery一个简单的注册验证
u011277123的博客
11-25 2948
我叫小星 2016-11-23 18:27 无标题文档 $(document).ready(function() { //用户名离开焦点的判断 $("#textfirst").blur(function(){ var first=$(this).val(); //得到用戶名文本框的值 var rr=$(this).closest("tr").find
贵美注册页面
qq_43689043的博客
04-13 1888
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贵美注册页面</title> </head> <body> <form auction="login.html" method="post"> <table> <tr> <td>登录名:&
使用JQ完成注册页面校验
03-09 325
validate入门： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validate入门案例</title> <script type="tex...
jQuery 实现【表单注册验证】功能
噗嗤
06-03 411
jQuery 表单验证 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.min.js"></script> <style type="text/css"> .high{color: red;} .onsuccess{font-size:smal
jQuery用户注册验证
最新发布
05-28
可以使用jQuery编写用户注册验证的代码。以下是一个简单的例子： HTML代码： ```html <form id="registration-form"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <br> <label for="password">Password:</label> <input type="password" id="password" name="password"> <br> <label for="confirm-password">Confirm Password:</label> <input type="password" id="confirm-password" name="confirm-password"> <br> <input type="submit" value="Register"> </form> ``` jQuery代码： ```javascript $(document).ready(function() { // 防止表单提交 $("#registration-form").submit(function(event) { event.preventDefault(); }); // 验证用户名 $("#username").blur(function() { var username = $(this).val(); if (!username) { alert("Username is required."); } }); // 验证密码 $("#password").blur(function() { var password = $(this).val(); if (!password) { alert("Password is required."); } }); // 验证确认密码 $("#confirm-password").blur(function() { var password = $("#password").val(); var confirmPassword = $(this).val(); if (password !== confirmPassword) { alert("Passwords do not match."); } }); // 提交表单 $("#registration-form").submit(function() { var username = $("#username").val(); var password = $("#password").val(); alert("Registration successful. Username: " + username + ", Password: " + password); }); }); ``` 这段代码将监听表单的提交事件，并防止表单默认的提交行为。然后，它将监听每个表单字段的blur事件，并验证每个字段是否符合要求。最后，如果表单验证成功，它将提交表单，并弹出一个成功消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值