前端页面(js非空验证,正则表达式判断邮箱手机号)

xiaoxiao2022-07-02 138

登录页面js非空验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <style> /*注册框主体*/ .pg-main{ width:600px; height: 500px; margin: 0 auto; border: 1px solid #dddddd; } /*标题*/ .pg-head{ height: 80px; line-height: 80px; font-size: 35px; font-weight: bold; margin-left:50px; } /*主体框*/ .pg-body{ height: 270px; color: #7b7b7b; } /*注册行*/ .pg-body-line{ height: 42px; line-height: 42px; } /*左边文字*/ .pg-body-left{ float:left; width: 200px; text-align: right; } /*星号*/ .pg-body-left span{ color:red; } /*右边*/ .pg-body-right{ float:left; width: 400px; font-size:14px; } /*右边输入框*/ .pg-body-right input{ width:250px; height: 28px; } /*验证码行输入框*/ .pg-body-right-verify input{ width:140px; height: 28px; float: left; /*margin:0 auto;*/ margin-top: 4px; } /*下部*/ .pg-foot { height: 120px; /*background-color: orange;*/ } /*协议勾选行*/ .pg-foot div{ margin-bottom: 10px; text-align: center; font-size:12px; } /*信息提交按钮*/ .pg-foot-button{ background-color: #e4393c; width: 260px; height: 36px; color:white; font-size: 16px; text-align: center; cursor:pointer; } </style> <body>  <div class="pg-main">  <div class="pg-head"> 登录 </div>   <div class="pg-body"> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>用户名： </div> <div class="pg-body-right"> <input type="text" id="username" ><span id="tiusername"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>邮箱： </div> <div class="pg-body-right"> <input type="text" id="email"><span id="tiemail"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>手机号： </div> <div class="pg-body-right"> <input type="text" maxlength="11" id="phone"><span id="tiphone"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>登陆密码： </div> <div class="pg-body-right"> <input type="password" id="password"><span id="tipassword"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>验证码： </div> <div class="pg-body-right-verify"> <input type="text"> </div> </div> </div>   <div class="pg-foot"> <div>没有账号现在去<a href="register.html">注册</a>>></div> <div> <input type="submit" id="submit" class="pg-foot-button" value="登录"> </div> </div>  </div> </body> <script type="text/javascript"> email.onchange = function(){ var email = this.value; var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if(reg.test(email)){ document.getElementById("tiemail").innerHTML="<font color='green'>邮箱正确</font>"; }else{ document.getElementById("tiemail").innerHTML="<font color='red'>邮箱格式不正确</font>"; } } phone.onchange =function(){ var phone = document.getElementById('phone').value; var phonenvm =/^1(3|4|5|7|8)\d{9}$/; if(phonenvm.test(phone)){ document.getElementById("tiphone").innerHTML="<font color='green'>手机号码正确</font>"; }else{ document.getElementById("tiphone").innerHTML="<font color='red'>手机号码有误，请重填</font>"; } } $('#submit').click(function(){ if ($('#username').val()==''|| $('#username').val()==null){ $('#tiusername').css("color",'red'); $('#tiusername').text("用户名不能为空!"); } if($('#email').val()=='' || $('#email')==null){ $('#tiemail').css("color","red"); $('#tiemail').text("邮箱不能为空!"); } if($('#phone').val()==''|| $('#phone').val()==null){ $('#tiphone').css('color','red'); $('#tiphone').text('手机号码不能为空！'); } if($('#password').val()==''||$('#password').val()==null){ $('#tipassword').css('color','red'); $('#tipassword').text('密码不能为空!'); } }) </script> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="js/jquery-3.3.1.min.js"></script> <style> /*注册框主体*/ .pg-main{ width:600px; height: 500px; margin: 0 auto; border: 1px solid #dddddd; } /*标题*/ .pg-head{ height: 80px; line-height: 80px; font-size: 35px; font-weight: bold; margin-left:50px; } /*主体框*/ .pg-body{ height: 270px; color: #7b7b7b; } /*注册行*/ .pg-body-line{ height: 42px; line-height: 42px; } /*左边文字*/ .pg-body-left{ float:left; width: 200px; text-align: right; } /*星号*/ .pg-body-left span{ color:red; } /*右边*/ .pg-body-right{ float:left; width: 400px; font-size:14px; } /*右边输入框*/ .pg-body-right input{ width:250px; height: 28px; } /*验证码行输入框*/ .pg-body-right-verify input{ width:140px; height: 28px; float: left; /*margin:0 auto;*/ margin-top: 4px; } /*下部*/ .pg-foot { height: 120px; /*background-color: orange;*/ } /*协议勾选行*/ .pg-foot div{ margin-bottom: 10px; text-align: center; font-size:12px; } .pg-foot-checkbox-a{ text-decoration: none; } /*信息提交按钮*/ .pg-foot-button{ background-color: #e4393c; width: 260px; height: 36px; color:white; font-size: 16px; text-align: center; cursor:pointer; } </style> </head> <body>  <div class="pg-main">  <div class="pg-head"> 新用户注册 </div>   <div class="pg-body"> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>用户名： </div> <div class="pg-body-right"> <input type="text" id="username" ><span id="tiusername"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>邮箱： </div> <div class="pg-body-right"> <input type="text" id="email"><span id="tiemail"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>手机号： </div> <div class="pg-body-right"> <input type="text" maxlength="11" id="phone"><span id="tiphone"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>登陆密码： </div> <div class="pg-body-right"> <input type="password" id="password"><span id="tipassword"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>确认密码： </div> <div class="pg-body-right"> <input type="password" id="newpassword" οnkeyup="validate()"><span id="tinewpassword"></span> </div> </div> <div class="pg-body-line"> <div class="pg-body-left"> <span>*</span>验证码： </div> <div class="pg-body-right-verify"> <input type="text"> </div> </div> </div>   <div class="pg-foot"> <div>已经有账号马上去<a href="login.html">登录</a>>></div> <div><input type="checkbox" class="pg-foot-checkbox"> 我已阅读并同意<a href="#" class="pg-foot-checkbox-a">《用户注册协议》</a></div> <div> <input type="submit" id="submit" class="pg-foot-button" value="同意以上协议并注册"> </div> </div>  </div> </body> <script type="text/javascript"> $("#submit").click(function(){ if($('#username').val()==''|| $('#username').val()==null){ document.getElementById("tiusername").innerHTML="<font color='red'>用户名不能为空</font>"; } if($('#email').val()==''|| $('#email').val()==null){ document.getElementById("tiemail").innerHTML="<font color='red'>邮箱不能为空</font>"; } if($('#phone').val()==''|| $('#phone').val()==null){ document.getElementById("tiphone").innerHTML="<font color='red'>手机号码不能为空</font>"; } if($('#password').val()==''|| $('#password').val()==null){ document.getElementById("tipassword").innerHTML="<font color='red'>密码不能为空</font>"; } if($('#newpassword').val()==''|| $('#newpassword').val()==null){ document.getElementById("tinewpassword").innerHTML="<font color='red'>密码不能为空</font>"; } }) email.onchange = function(){ var email = this.value; var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if(reg.test(email)){ document.getElementById("tiemail").innerHTML="<font color='green'>邮箱正确</font>"; }else{ document.getElementById("tiemail").innerHTML="<font color='red'>邮箱格式不正确</font>"; } } phone.onchange =function(){ var phone = document.getElementById('phone').value; var phonenvm =/^1(3|4|5|7|8)\d{9}$/; if(phonenvm.test(phone)){ document.getElementById("tiphone").innerHTML="<font color='green'>手机号码正确</font>"; }else{ document.getElementById("tiphone").innerHTML="<font color='red'>手机号码有误，请重填</font>"; } } function validate() { var pwd1 = document.getElementById("password").value; var pwd2 = document.getElementById("newpassword").value;  if(pwd1 == pwd2) { document.getElementById("tinewpassword").innerHTML="<font color='green'>两次密码相同</font>"; } else { document.getElementById("tinewpassword").innerHTML="<font color='red'>两次密码不相同</font>"; } } </script> </html>

最新回复(0)