jquery表单校验

最新推荐文章于 2022-11-13 11:34:52 发布

道法—自然

最新推荐文章于 2022-11-13 11:34:52 发布

阅读量205

点赞数

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103555632

版权

本文详细介绍了如何使用jQuery进行表单验证，包括基本的输入检查、自定义验证规则以及错误提示的显示，帮助开发者实现高效且用户体验良好的表单验证流程。

摘要由CSDN通过智能技术生成

<html>
	<head>
		<title>jquery表单校验</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--声明js代码域-->
		<script type="text/javascript">
			$(function(){
				$("#showdiv").slideDown(3000);
				//创建验证码
					var num=Math.floor(Math.random()*9000+1000);
					//将验证码放入span中
					$("#codeSpan").html(num).css("background-image","url(img/code.gif)").css("font-size","20px");
					//单击更换验证码
					$("#codeSpan").click(function(){
						//创建验证码
						var num=Math.floor(Math.random()*9000+1000);
						//将验证码放入span中
						$("#codeSpan").html(num).css("background-image","url(img/code.gif)").css("font-size","20px");
					})
				//用户名校验
					$("#uname").blur(function(){
						checkData(this,/^[\u4e00-\u9fa5]{2,4}$/);
					})
				//校验密码
					$("#pwd").blur(function(){
						//获取用户数据
						var  pwd=$("#pwd").val();
						//获取span
						var span=$("#pwdSpan");
						//校验
						var reg=/^[a-zA-Z]\w{5,7}$/;
						if(pwd==""){
							span.html("*密码不能为空").addClass("error").removeClass("success");
						}else if(reg.test(pwd)){
							span.html("*密码OK").addClass("success").removeClass("error");
						}else{
							span.html("*密码不符合规则").addClass("error").removeClass("success");
						}
					})
				//校验手机号
				$("#phone").blur(function(){
					checkData(this,/^1[3456789]\d{9}$/)
				})
				//校验邮箱
				$("#mail").blur(function(){
					checkData(this,/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/)
				})
				//校验籍贯
				$("#address").change(function(){
					//获取用户选择
					var address=$("#address").val();
					//获取span
					var span=$("#addressSpan");
					//校验
					if(address!

最低0.47元/天解锁文章

道法—自然

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery表单校验

<html> <head> <title>jquery表单校验</title> <meta charset="UTF-8"/>  <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-...
复制链接

扫一扫

专栏目录