使用正则表达式验证登录页面输入是否符合要求

2024-12-03 05:13:16

先给大家展示下效果图：

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <script src="js/jquery-1.8.0.min.js"></script>
 <script>
 $(function() {
  $("input[name='uname']").blur(function() { //失去焦点
  var namestr = $(this).val();
  var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
  if(!regstr.test(namestr)) {
   $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red");
   return false;
  }
  return true;
  });
  $("input[name = 'uname']").focus(function() { //获取焦点
  $(this).val("");
  $(this).parent().next().html("");
  });
  $("input[name='pwd']").blur(function() {
  var pwdstr = $(this).val();
  var regstr = /^\w{6}$/;
  if(!regstr.test(pwdstr)) {
   $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red");
   return false;
  }
  return true;
  });
  $("input[name='pwd']").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name='birthday']").blur(function() {
  var birthdaystr = $(this).val();
  var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/;
  if(!regstr.test(birthdaystr)) {
   $(this).parent().next().html("日期格式不正确").css("color", "red");
   return false;
  }
  return true;
  });
  $("input[name='birthday']").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name='email']").blur(function(){
  var emailstr = $(this).val();
  var regstr = /^[\w\-]+@[a-z0-9A-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;
  if(!regstr.test(emailstr)){
   $(this).parent().next().html("邮箱格式不正确").css("color","red");
   return false;
  }
  return true;
  });
  $("input[name='email']").focus(function(){
  $(this).parent().next().html("");
  });
 });
 </script>
 <style>
 body {
  font-size: 12px;
 }
 #home {
  background-color: beige;
  border: solid 1px black;
  width: 550px;
  height: 185px;
  margin: auto;
  margin-top: 20px;
 }
 #head {
  height: 135px;
 }
 #foot {
  text-align: center;
 }
 .dl1 {
  clear: both;
  padding-left: 10px;
 }
 .dl1 dt {
  float: left;
  height: 30px;
  width: 80px;
  line-height: 30px;
 }
 .dl1 dd {
  float: left;
  height: 30px;
  line-height: 30px;
  /*width: 250px;*/
 }
 #btn_res {
  background-image: url(img/reset.gif);
  width: 80px;
  height: 34px;
 }
 #btn_sub {
  background-image: url(img/submit.gif);
  width: 80px;
  height: 34px;
 }
 </style>
 <body>
 <div id="home">
  <div id="head">
  <form action="" method="post">
   <dl class="dl1">
   <dt>用户名 : </dt>
   <dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd>
   <dd></dd>
   </dl>
   <dl class="dl1">
   <dt>用户密码 : </dt>
   <dd class="dd1"><input type="password" name="pwd" /></dd>
   <dd></dd>
   </dl>
   <dl class="dl1">
   <dt>出生日期 : </dt>
   <dd class="dd1"><input type="text" name="birthday" /></dd>
   <dd>yyyy-mm-dd</dd>
   </dl>
   <dl class="dl1">
   <dt>用户邮箱 : </dt>
   <dd><input type="text" name="email"/></dd>
   <dd></dd>
   </dl>
  </form>
  </div>
  <div id="foot">
  <input type="submit" value="" id="btn_sub" />
  <input type="reset" value="" id="btn_res" />
  </div>
 </div>
 </body>
</html>

总结

以上所述是小编给大家介绍的使用正则表达式验证登录页面输入是否符合要求，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

js正则表达式注册页面表单验证

正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下也可以这样验证具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
Python正则表达式匹配HTML页面编码

html页面一般都会指定一个编码,如何获取到是处理html页面的第一步,因为错误的编码必然带来后面处理的问题.这里我用python的正则表达式写了个: import re a = ["<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />", '<meta http-equiv=Content-Type content="text/ht
正则表达式进行页面表单验证功能

一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子. 效果图:(当用户填写的信息不符合规范时显示错误提示) 我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏. html结构: <div id="wrap"> <h1>注册</h1> <div> <input t
Java使用正则表达式对注册页面进行验证功能实现

本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class registered { public static void main(String[] args) { //注册用户 Scanner sc=new Scanner(System.in
利用jquery正则表达式在页面验证url网址输入是否正确

本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确,代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"&
动态向页面添加控件和使用正则表达式的代码

复制代码代码如下: namespace WebCode { public partial class _default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String str = "这是一个测试文件<{config name=\"pagetitle1\"}>,一个标签的解析<{config name=\"pagetitle2\
使用正则表达式验证登录页面输入是否符合要求

先给大家展示下效果图: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> $(f
JavaScript正则表达式验证登录实例

本文实例为大家分享了js正则表达式验证登录的具体代码,供大家参考,具体内容如下代码片段: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>qq登录模拟测试</title> </head> <body> <form name="form1" action="#" method
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p
原生js验证简洁注册登录页面

序一个以js验证表单的简洁的注册登录页面,不多说直接上图效果主要文件完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
vue实现登录页面的验证码以及验证过程解析(面向新手)

做成之后就是这个样子接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>
Java Web实现登录页面验证码验证功能

一.验证码验证码本质上是一张图片,图片内容会随着程序的运行而随机生成验证码的作用:防止应用恶意发送数据,一定程度上避免了恶意程序对网站的攻击. 验证码本质上是一张图片,图片内容的准确解析不容易用程序来实现. 验证码的绘制:绘制验证码图片不仅仅需要随机生成要绘制的内容,同时要配合Java中与绘图有关的一套API来完成. 二.效果演示验证码Demo 三.给出完整代码 (1)服务器端代码ActionServlet.java package session; import java.io.IOEx
antd Vue实现Login登录页面布局案例详解附带验证码验证功能

效果 Login页面  <template> <d
Js中使用正则表达式验证输入是否有特殊字符

Js中使用正则表达式验证输入是否有特殊字符的代码如下所示: //验证是否有特殊字符 function checkval(t) { var re = /^[\u4e00-\u9fa5a-z]+$/gi;//只能输入汉字和英文字母 if (re.test(t)) { return true; } else { return false; } } js正则表达式,验证同一字符串不同 var num = 888; var reg = /^[1-9]{1}[0-9]*$/g; console.log(r

使用正则表达式验证登录页面输入是否符合要求

相关推荐

随机推荐