精华内容
下载资源
问答
  • html验证邮箱

    2020-05-29 13:14:55
    判断一个字符是否是邮箱,是返回true,不是返回false 123mail@qq.com 是 $123mail@qq.com 不是 /* 判断邮箱:已知该邮箱的用户名只能由数字字母下划线组成,域名为@qq.com 判断一个字符是否是邮箱,是返回true,...

    判断邮箱:已知该邮箱的用户名只能由数字字母下划线组成,域名为@qq.com
    判断一个字符是否是邮箱,是返回true,不是返回false
    123mail@qq.com 是
    $123mail@qq.com 不是

    /*
                判断邮箱:已知该邮箱的用户名只能由数字字母下划线组成,域名为@qq.com
                判断一个字符是否是邮箱,是返回true,不是返回false
                123mail@qq.com 是
                $123mail@qq.com 不是
                */
                alert(isEmail("123mail@qq.com"));
                alert(isEmail("123mail$@qq.com"));
                function isEmail(email){
                    var index = email.indexOf("@");
                    if(index==-1){
                        return false;
                    }else{
                        var endStr = email.substring(index);
                        if(endStr!="@qq.com"){
                            return false;
                        }else{
                            //判断用户名是否符合数字字母下划线组合
                            var username = email.substring(0,index);
                            var isRight = true;//假设都符合
                            for(var i=0;i<username.length;i++){
                                if(!isABC(username[i])){
                                    isRight = false;
                                    break;
                                }
                            }
                            return isRight;
                        }
                    }
                };
                function isABC(charrStr){
                   //判断用户名是否符合数字字母下划线组合
                    if(charrStr>="a" && charrStr<="z" || charrStr>="A" && charrStr<="Z" || charrStr>=0 && charrStr <=9 || charrStr=="_"){
                        return true;
                    }else{
                        return false;
                    }
                }
    

    效果
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • HTML表单之邮箱验证

    万次阅读 2018-10-16 17:36:41
    学习HTML,表单是一个很重要的知识,而表单最常用的可能就是表单的验证了;下面我介绍验证邮箱的一种方法。

    学习HTML,表单是一个很重要的知识,而表单最常用的可能就是表单的验证了;下面我介绍验证邮箱的一种方法:

    先上代码:(注:这个代码是可以运行的,可以自己试试,把重点放在js和表单里面!)

    <!DOCTYPE html>
    <html>
      <head>
        <title>表单之邮箱验证.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <style type="text/css">
    		body{
    			background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg);
    			background-repeat: no-repeat;
    			/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */    
    			background-attachment: fixed;  /*此条属性必须设置否则可能无效*/    
    			/* 让背景图基于容器大小伸缩 */   
    			background-size: cover;  
    			/* 设置背景颜色,背景图加载过程中会显示背景色 */   
    			background-color: #CCCCCC;
    		}
    		#user_reg{
    			font-family: 微软雅黑;
    			font-size: 40px;
    			text-align: center;
    			margin-top: 200px;
    		}
    		form{
    			width: 600px;					/*设置宽度,方便使其居中*/
    			margin: 40px auto auto auto;	/*上右下左*/
    			font-size: 25px;
    		}
    		input{
    			height: 30px;
    			width: 14em;
    			font-size: 20px;
    		}
    		#username[value]{
    			color: gray;
    		}
    		#username1[value]{
    			color: black;
    		}
    	</style>
      </head>
      
      <script type="text/javascript">
    	//onblur失去焦点事件,用户离开输入框时执行 JavaScript 代码:
    	//函数:验证邮箱格式
      	function isEmail(strEmail){
      		//定义正则表达式的变量:邮箱正则
      		var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      		console.log(strEmail);
      		//文本框不为空,并且验证邮箱正则成功,给出正确提示
      		if(strEmail != null && strEmail.search(reg) != -1)
      		{
      			document.getElementById("test_user").innerHTML = "<font color='green' size='4px'>√邮箱格式正确!</font>";
      		}else{
      			document.getElementById("test_user").innerHTML = "<font color='red' size='4px'>邮箱格式错误!</font>";
      		}
      	}
      </script>
      
     <body>
      	<div id="user_reg">验证邮箱:</div>
    	<form action="" method="post" name="form">
    		<table>
    			<tr>
    				<td>请输入账号:</td>
    				<td><input type="text" id="username" name="username" value="只能用邮箱注册" 
    				onclick="username.value='',username.id='username1'" 
    				onblur="isEmail(this.value)"/></td>
    				<td id="test_user">&nbsp;</td>
    			</tr>
    		</table>
    	</form>
    </body>
    </html>

    这是效果图:

    来看下主要代码:

    HTML部分:

    <body>
      	<div id="user_reg">验证邮箱:</div>
    	<form action="" method="post" name="form">
    		<table>
    			<tr>
    				<td>请输入账号:</td>
    				<td><input type="text" id="username" name="username" value="只能用邮箱注册" 
    				onclick="username.value='',username.id='username1'" 
    				onblur="isEmail(this.value)"/></td>
    				<td id="test_user">&nbsp;</td>
    			</tr>
    		</table>
    	</form>
    </body>

      简单分析下:

        1. 首先是提示用户,该文本框只能填写邮箱,用 value 设置初始值,显示在框内;添加事件onclick ,当用户鼠标单击时触发,使其文本框的值置为 “” ,并且使其ID改变,方便改变样式(要看效果,可以自己拷贝代码运行)

        补充下:不过,我不建议使用这种方法,因为后来我了解到 input 有个属性可以轻松解决这个问题:spaceholder,属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失。详见(w3c文档):http://www.w3school.com.cn/html5/html_5_form_attributes.asp

         2. 然后添加onblur 事件,当焦点离开该文本框时触发事件,作用就JS 里面在详解。

         3.后面还有个格子<td id="test_user">&nbsp;</td>,是为了显示验证结果的,当然你也可以用 alert("提示信息") 显示验证结果。

         4.如果这个方法要在提交表单前验证,并且带回返回值,应该还要在定义函数时加上 return 语句,并且触发事件要这样写:

    "return  isEmail(this.value)" ,这样当验证成功时,返回true,可以提交表单;验证失败,返回false,禁止其提交表单。(详见我的另一篇文章:https://blog.csdn.net/weixin_41287260/article/details/83061037

    JavaScript 部分:

    <script type="text/javascript">
    	//onblur失去焦点事件,用户离开输入框时执行 JavaScript 代码:
    	//函数:验证邮箱格式
      	function isEmail(strEmail){
      		//定义正则表达式的变量:邮箱正则
      		var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      		console.log(strEmail);
      		//文本框不为空,并且验证邮箱正则成功,给出正确提示
      		if(strEmail != null && strEmail.search(reg) != -1)
      		{
      			document.getElementById("test_user").innerHTML = "<font color='green' size='4px'>√邮箱格式正确!</font>";
      		}else{
      			document.getElementById("test_user").innerHTML = "<font color='red' size='4px'>邮箱格式错误!</font>";
      		}
      	}
      </script>

    简单分析下:

        1. 先看下函数名:isEmail(strEmail) ,是含参数的,由调用函数那里我们可以知道strEmail 的值是这个文本框的value ;而且

    我这里也用console.log(strEmail); 进行验证了,(当然alert(strEmail)也可以,看个人喜好吧!)。

         当然,你也可以定义不含参的函数:isEmail( );定义时用var username = document.getElementById("username1").value;

    也可以得到同样的效果。

         2. 然后定义邮箱正则,这个要是你足够厉害可以去琢磨,但是火候不够就去百度搜,别人已经找了一大堆验证各种问题的正则表达式。

         3.验证正则我这里用的是:strEmail.search(reg) != -1 ,该语句是验证通过的语句。当然你也可以用  reg.test(strEmail) 来验证,通过是返回true。

         4.如果文本框不为空,并且验证邮箱通过,在(上面我说个的那个)表格里给出(绿色的)验证正确提示,否则则给出(红色)验证错误提示。

     

    来看看效果怎么样吧:

    这是原始页面(请注意看里面的字是灰色的):

     

     下面这张是点击文本框后的图(忽略截图大小问题):文本框的字消失了

     

     填写非邮箱内容后,右侧给出红色错误提示:

     

     

    填写邮箱格式信息:右侧给出绿色正确提示:

    the end。

     

    2018.12.8更新

    提供个正则文档,有需要可以参考下:

    链接:https://pan.baidu.com/s/1_1pxOIkEhOlTsxSnTRL9cg 
    提取码:gpx8 
    复制这段内容后打开百度网盘手机App,操作更方便哦。

    2019年9月25日更新:

    添加测试地址: https://codepen.io/yansheng836/pen/pozYaEv,注:背景使用了一张在线照片,和文中照片不同。

    展开全文
  • 邮箱验证

    2017-11-24 16:17:00
    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已...

    JavaScript 表单验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

    被 JavaScript 验证的这些典型的表单数据有:

    • 用户是否已填写表单中的必填项目?
    • 用户输入的邮件地址是否合法?
    • 用户是否已输入合法的日期?
    • 用户是否在数据域 (numeric field) 中输入了文本?
       1 <html>
       2 <head>
       3 <script type="text/javascript">
       4 function validate_email(field,alerttxt)
       5 {
       6 with (field)
       7 {
       8 apos=value.indexOf("@")
       9 dotpos=value.lastIndexOf(".")
      10 if (apos<1||dotpos-apos<2) 
      11   {alert(alerttxt);return false}
      12 else {return true}
      13 }
      14 }
      15 
      16 function validate_form(thisform)
      17 {
      18 with (thisform)
      19 {
      20 if (validate_email(email,"Not a valid e-mail address!")==false)
      21   {email.focus();return false}
      22 }
      23 }
      24 </script>
      25 </head>
      26 
      27 <body>
      28 <form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
      29 Email: <input type="text" name="email" size="30">
      30 <input type="submit" value="Submit"> 
      31 </form>
      32 </body>
      33 
      34 </html>

       

    展开全文
  • 1.邮箱验证 form action="../js/test9.html" method="get">  Emailinput type="email" name="getEmail">  input type="submit" value="提交"> form> 2.url验证 form action="../js/test9.html" ...

    1.邮箱的验证

    <form action="../js/test9.html" method="get">
        Email<input type="email" name="getEmail">
        <input type="submit" value="提交">
    </form>

    2.url验证

    <form action="../js/test9.html" method="get">
        url<input type="url" name="getUrl" >
        <input type="submit" value="提交">
    </form>

    3.number验证

    <form action="../js/test9.html" method="get">
        number<input type="number" name="getNumber" min="1" max="2" >
        <input type="submit" value="提交">
    </form>

    4.range的验证

    <form action="../js/test9.html" method="get">
        range<input type="range" name="getRange" min="1" max="4" >
        <input type="submit" value="提交">
    </form>


    展开全文
  • 通用的邮箱html验证

    2014-10-29 16:24:52
    通用的邮箱html、电话号码与手机号码验证
  • 只需给提交的表单(邮箱)添加只需要type=“email”即可。 例: <form action="" method="post"> <label for="email">邮箱:</label><input id="email" name="email" type="email" /> ...
  • js 邮箱验证

    2011-07-25 19:30:52
    JavaScript正则表达式验证邮箱地址http://hi.baidu.com/cxf83/blog/item/a7264366305dec24aa184c43.html/cmtid/61142ac71cc3ded3d000608cJS 简单的注册验证判断手机和邮箱(正则表达式
  • 短信验证参考:https://blog.csdn.net/qq_37698777/article/details/78843298 自动发邮件:https://blog.csdn.net/sinat_38167943/article/details/73742197 转载于:...
  • 邮箱验证html部分: 邮箱验证:<input type="text" id="mail" value="" / onkeyup="checkEmail(this.value)"> <span id="span1"></span> js部分: function checkEmail(str) { var ...
  • 邮箱验证js

    2015-05-19 13:03:31
    HTML代码:<div class="reg_con" style="position:relative;"><label>公司邮箱</label><input type="text" name="email" value="输入邮箱如:Alice@isoftstone.com" class="inp" ...
  • html邮箱和网址验证

    千次阅读 2018-03-06 13:14:23
    html自带验证&lt;form action="#" method="get"&gt;请输入你的邮箱:&lt;input type = "email" name="formmail" required/&gt;&lt;br /&gt;&...
  • 本文为大家分享了yii2.0实现验证用户名与邮箱功能的相关代码,具体内容如下视图signup.php代码:use yii\helpers\html;use yii\bootstrap\activeform;/* @var $this yii\web\view *//* @var $form yii\bootstrap\...
  • 我们最经常遇到的验证,就是电子邮件地址验证。网站上常见。各种网页脚本也都常用“正则表达式”(regular expression)对我们输入的电子邮件地址进行验证,判断是否合法。有的还能分解出用户名和域名。现在用PHP语言...
  • html5 JavaScript 邮箱地址验证

    千次阅读 2014-01-06 22:50:05
    html5 网页特效 邮箱地址验证 body, input, textarea {  font-family: "helvetica", arial, helvetica; } label {  display: block;  float: left;  clear: left;  text-align: right;  width: 100px;  mar
  • 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website。 在备注中的 textarea 字段中,我们将脚本放于 <textarea> 和 </t...
  • java 邮箱验证

    2017-04-10 12:29:00
    http://www.oracle.com/technetwork/java/javamail/index-138643.html 2.将字符串通过MD5进行加密的工具类: Java代码 importjava.io.UnsupportedEncodingException; importjava.sec...
  • 前端邮箱验证

    2016-12-12 12:10:00
    DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js"></script> <script> $(function(){ $("#use...
  • JQuery邮箱验证

    2012-03-15 21:28:53
    http://www.w3.org/1999/xhtml">        $(function () {  $('#txtemail').focus(function () {  $('#spemail').html('请输入邮箱地址');  })
  • 简单邮箱验证

    2014-02-18 13:20:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <script type="text/javascript" >...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,204
精华内容 481
关键字:

html邮箱验证