这篇文章主要讲解了“怎么用Jquery实现员工管理注册页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用jquery实现员工管理注册页面”吧！代码展示HTML页面代码<body&
这篇文章主要讲解了“怎么用Jquery实现员工管理注册页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用jquery实现员工管理注册页面”吧！
代码展示
HTML页面代码
<body> <div class="container"> <h3 class="text-center">用户注册</h3> <fORM action="Baidu.html" method="post" class="form-horizontal"> <div class="form-group"> <label for="username" class="col-md-2 col-md-offset-3 control-label">用户名<b>*</b></label> <div class="col-md-3"> <input id="username" type="text" placeholder="4-10个英文字母或数字" class="form-control"> </div> <div class="col-md-4"> <label id="errorname" class="control-label errstyle"></label> </div> </div> <div class="form-group"> <label for="passWord" class="col-md-2 col-md-offset-3 control-label">密码<b>*</b></label> <div class="col-md-3"> <input id="password" type="password" placeholder="8-16个英文字母或数字" class="form-control"> </div> <div class="col-md-4"> <label id="errorpassword" class="control-label errstyle"></label> </div> </div> <div class="form-group"> <label for="confirm" class="col-md-2 col-md-offset-3 control-label">确认密码<b>*</b></label> <div class="col-md-3"> <input id="confirm" type="password" placeholder="确认密码" class="form-control"> </div> <div class="col-md-4"> <label id="errorconfirm" class="control-label errstyle"></label> </div> </div> <div class="form-group"> <label for="department" class="col-md-2 col-md-offset-3 control-label">部门</label> <div class="col-md-3"> <select id="department" class="form-control"> <option>销售部</option> <option>技术部</option> <option>人事部</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 col-md-offset-3 control-label">性别</label> <div class="col-md-3 radio"> <label><input name="gender" type="radio" value="1" checked>男</label> <label><input name="gender" type="radio" value="0">女</label> </div> </div> <div class="form-group"> <label class="col-md-2 col-md-offset-3 control-label">兴趣爱好</label> <div class="col-md-3 checkbox" id="hobbies"> <label><input type="checkbox" value="1" id="xq">下棋</label> <label><input type="checkbox" value="2" id="yy">游泳</label> <label><input type="checkbox" value="3" id="ps">爬山</label> <label><input type="checkbox" value="4" id="dq">打球</label> </div> <div class="col-md-4"> <label id="errorhobbies" class="control-label errstyle"></label> </div> </div> <div class="form-group"> <label for="email" class="col-md-2 col-md-offset-3 control-label">电子邮箱</label> <div class="col-md-3"> <input type="email" id="email" placeholder="电子邮箱" class="form-control"> </div> <div class="col-md-4"> <label id="erroremail" class="control-label errstyle"></label> </div> </div> <div class="form-group"> <label class="col-md-2 col-md-offset-3 control-label">人生格言</label> <div class="col-md-3"> <textarea class="form-control" rows="3" placeholder="这家伙很懒，什么也没留下"></textarea> </div> </div> <div class="col-md-2 col-md-offset-5 text-center"> <button class="btn btn-primary" id="submit">提交</button> <span> </span> <button class="btn btn-primary" type="reset">清空</button> </div> </form> </div> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap-3.3.7-dist"></script></body>js代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ReGISter</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/CSS/bootstrap.min.css" rel="external nofollow" > <style> .errstyle { color: red; } b{ color: red; font-weight: bolder; } </style> <script src=""></script> //引入jQuery库 <script src=""></script> <script> $(function(){ var a=false; var b=false; var c=false; var d=false; var e=false; $("#username").blur(function(){ if($(this).val().length == 0) { $("#errorname").html("用户名不为空"); a=false; } else{ var reg = /^[0-9a-zA-Z]{4,10}$/; if(!reg.test($(this).val())) { $("#errorname").html("4-10个英文字母或数字"); a=false; } else{ $("#errorname").html(""); a=true; } } }); $("#password").blur(function() { if($(this).val().length == 0) { $("#errorpassword").html("密码不为空"); b=false; } else{ var reg = /^[0-9a-zA-Z]{6,15}$/; if(!reg.test($(this).val())) { $("#errorpassword").html("6-15个英文字母或数字"); b=false; } else{ $("#errorpassword").html(""); b=true; } } }); $("#confirm").blur(function() { if($(this).val().length == 0) { $("#errorconfirm").html("确认密码不为空"); c=false; } else { if($(this).val() != $("#password").val()) { $("#errorconfirm").html("与密码输入不一致"); c=false; } else { $("#errorconfirm").html(""); c=true; } } }); $("#email").blur(function() { if(!$("#xq").is(":checked") || $("#yy").is(":checked") || $("#ps").is(":checked") || $("#dq").is(":checked")){ $("#errorhobbies").html("至少一个兴趣爱好"); e=false; } else{ $("#errorhobbies").html(""); e=true; } if($(this).val().length == 0) { $("#erroremail").html("电子邮箱不为空"); d=false; } else{ var reg=/^\w+@\w+(.\w+)+$/; if(!reg.test($(this).val())) { $("#erroremail").html("电子邮箱格式错误"); d=false; } else{ $("#erroremail").html(""); d=true; } } }); $("#submit").click(function() { if(a && b && c && d && e){ $("form").submit(); } else{ alert("有信息填写错误"); return false; } }); }); </script></head>
感谢各位的阅读，以上就是“怎么用jquery实现员工管理注册页面”的内容了，经过本文的学习后，相信大家对怎么用jquery实现员工管理注册页面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: 怎么用jquery实现员工管理注册页面
本文链接: https://www.lsjlt.com/news/299313.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0