注册验证(简单,jquery)

悠悠 2022-06-04 08:41 166阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<form action="">
    		用户名：<input type="text" name="uname">
    					<span></span><br>
    		密码：<input type="password" name="upwd">
    					<span></span><br>
    		<input type="submit" value="提交注册信息">
    	</form>
    
    	<script src="js/jquery.min.js"></script>
    	<script>
    		var $txtName=$("form>input[name=uname]"),
    		    $txtPwd=$("form>input[name=upwd]"),
    		    msgs={
    		    	nameErr:"用户名必须介于3~9位之间!",
    		    	pwdErr:"密码必须介于6~8位之间!"
    		    };
    		$txtName.blur(e=>{
    			vali($(e.target),3,9,msgs.nameErr);
    			//这里还可以加其他验证
    		});
    		$txtPwd.blur(e=>{
    			vali($(e.target),6,8,msgs.pwdErr);
    		});
    		$("form").submit(e=>{
    			if(!vali($txtName,3,9,msgs.nameErr)){
    				e.preventDefault();
    			}else if(!vali($txtPwd,6,8,msgs.pwdErr)){
    				e.preventDefault();
    			}
    		})
    		function vali($txt,minLen,maxLen,msg){
    			var len=$txt.val().trim().length;
    			var $span=$txt.next();
    			if(len>=minLen&&len<=maxLen){
    				$span.html("<img src='img/ok.png'>");
    				return true;
    			}else{
    				$span.html("<img src='img/err.png'>"+msg);
    				return false;
    			}
    		}
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关短信验证注册

reg.php <?php 引入sdk文件 include("../config/mobphp/alisms/aliyun/api_demo/SmsD

谁践踏了优雅/ 2022年10月05日 10:55/ 0 赞/ 193 阅读

相关 jquery验证大全

jQuery验证及限制绑定键盘监听事件 $(document).on("keypress", ".txt-valid-len", function (e)

小咪咪/ 2022年09月28日 11:42/ 0 赞/ 152 阅读

相关三层架构(MVC)实现简单登陆注册验证（含验证码）

前言在我的上一篇微博里我已经提出了登陆的方法，当时我采取的是纯servlet方式，因为当时刚接触到servlet，正好网上没有这方面的全面讲解，所以我就发飙了。不过在现实生产中

刺骨的言语ヽ痛彻心扉/ 2022年08月21日 02:13/ 0 赞/ 243 阅读

相关 jquery验证用户名

function chkUsername(username) \{ if(username=="") \{ return 0; \} else if(

今天药忘吃喽~/ 2022年08月07日 10:43/ 0 赞/ 200 阅读

相关 jquery.validate 验证

$("dataForm").validate({ ignore : [],

怼烎@/ 2022年08月05日 08:23/ 0 赞/ 166 阅读

相关 Jquery Validate验证

HTML代码 <form id="RegisterForm"> <div class="login-screen"> <div class="l

￡神魔★判官ぃ/ 2022年07月30日 14:27/ 0 赞/ 160 阅读

相关 JQuery validate插件验证用户注册信息

使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。本实例使用的是1.5版本。示例是在SSH下做的，代

Bertha 。/ 2022年07月12日 04:24/ 0 赞/ 207 阅读

相关注册验证(简单,jquery)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

悠悠/ 2022年06月04日 08:41/ 0 赞/ 167 阅读

相关验证注册信息

验证邮箱格式正则表达式： /^\[a-zA-Z0-9\_-\]+@\[a-zA-Z0-9\_-\]+(\\.\[a-zA-Z0-9\_-\]+)+$/g display:i

Myth丶恋晨/ 2022年05月15日 08:36/ 0 赞/ 179 阅读

相关注册--验证码制作

1.input 输入框和验证码图片（src 属性引入图片）： <input id="code" name="code" type="text" class="ch

灰太狼/ 2022年01月27日 01:59/ 0 赞/ 347 阅读