| 本文实例为大家分享了jquery实现员工管理注册页面的具体代码，供大家参考，具体内容如下 代码展示HTML页面代码 <body> <div class="container"> <h2 class="text-center">用户注册</h2> <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>效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
JavaScript实现大文件分片上传处理
jquery结合css实现返回顶部功能 |
