精华内容
下载资源
问答
  • 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,注:背景使用了一张在线照片,和文中照片不同。

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

    JavaScript 表单验证

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

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

    用户是否已填写表单中的必填项目?

    用户输入的邮件地址是否合法?

    用户是否已输入合法的日期?

    用户是否在数据域 (numeric field) 中输入了文本?

    function validate_required(field,alerttxt)

    {

    with (field)

    {

    if (value==null||value=="")

    {alert(alerttxt);return false}

    else {return true}

    }

    }

    function validate_form(thisform)

    {

    with (thisform)

    {

    if (validate_required(email,"Email must be filled out!")==false)

    {email.focus();return false}

    }

    }

    Email:

    E-mail 验证

    下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

    function validate_email(field,alerttxt)

    {

    with (field)

    {

    apos=value.indexOf("@")

    dotpos=value.lastIndexOf(".")

    if (apos<1||dotpos-apos<2)

    {alert(alerttxt);return false}

    else {return true}

    }

    }

    function validate_form(thisform)

    {

    with (thisform)

    {

    if (validate_email(email,"Not a valid e-mail address!")==false)

    {email.focus();return false}

    }

    }

    Email:

    展开全文
  • 准备工作: 准备文件夹 所需文件express(框架),formdata(提交表单),art-template(模板) 搭建框架 启动服务器 <...DOCTYPE html>...html lang="en">...验证邮箱地址是否已经注册</titl...

    准备工作:

    1. 准备文件夹
    2. 所需文件express(框架),formdata(提交表单),art-template(模板)
    3. 搭建框架
    4. 启动服务器

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

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>验证邮箱地址是否已经注册</title>
    	<link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css">
    	<style type="text/css">
    		p:not(:empty) {
    			padding: 15px;
    		}
    		.container {
    			padding-top: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="form-group">
    			<label>邮箱地址</label>
    			<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
    		</div>
    		<!-- 错误 bg-danger 正确 bg-success -->
    		<p id="info"></p>
    	</div>
    	<script src="./js/ajax.js"></script>
    	<script>
    		// 获取页面中的元素
    		var emailInp = document.getElementById('email');
    		var info = document.getElementById('info');
    
    		// 当文本框离开焦点以后
    		emailInp.onblur = function () {
    			// 获取用户输入的邮箱地址
    			var email = this.value;
    			// 验证邮箱地址的正则表达式
    			var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    			// 如果用户输入的邮箱地址不符合规则
    			if (!reg.test(email)) {
    				// 给出用户提示
    				info.innerHTML = '请输入符合规则的邮箱地址';
    				// 让提示信息显示为错误提示信息的样式
    				info.className = 'bg-danger';
    				// 阻止程序向下执行
    				return;
    			}
    
    			// 向服务器端发送请求
    			ajax({
    				type: 'get',
    				url: 'http://localhost:3000/verifyEmailAdress',
    				data: {
    					email: email
    				},
    				success: function (result) {
    					console.log(result);
    					info.innerHTML = result.message;
    					info.className = 'bg-success';
    				},
    				error: function (result) {
    					console.log(result)
    					info.innerHTML = result.message;
    					info.className = 'bg-danger';
    				}
    			});
    
    		}
    	</script>
    </body>
    </html>
    
    展开全文
  • JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证
  • DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="...
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <h2>验证实例</h2>
        <form action="" ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
            <p>用户名:<br>
                <input type="text" name="user" ng-model="user" required>
                <span style="color:red" ng-show="myForm.user.$dirty&&myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">用户名是必须的</span>
            </span>
            </p>
            <p>邮箱:<br>
                <input type="email" name="email" ng-model="email" required>
                <span style="color: red" ng-show="myForm.user.$dirty && myForm.email.$invalid">
                    <span ng-show="myForm.email.&error.required">邮箱是必须的</span>
                    <span ng-show="myForm.email.&error.email">非法的邮箱地址</span>
    
                </span>
    
            </p>
    
    
            <input type="submit" ng-disable="myForm.user.$dirty&&myForm.user.&invalid||myForm.email.$dirty&&myForm.email.&invalid">
    
        </form>
        <script>
            var app = angular.module('myApp', []);
            app.controller('validateCtrl', function($scope) {
                $scope.user = 'John Doe';
                $scope.email = 'john.doe@gmail.com';
            });
        </script>
    </body>
    </html>

     

    展开全文
  • JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件...
  • <...DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function validate_email...
  • 1.html部分: &lt;el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm"&gt; &lt;el-form-item ...
  • 本文介绍的是一般性的php表单验证机制 下一篇文章介绍的是通过php过滤器实现的验证机制 用得到的拿走 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为:...
  • 前几天对表单注册有点兴趣,于是在课余时间了解了一些表单验证方法,自己也试着做了一个表单验证(前端验证),很low,各位童鞋应该都看得懂,话不多说,上代码 <!DOCTYPE html> <html lang="en"> <...
  • 本文实例讲述了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法。jQuery 脚本function check_password() {if ($("#password").val() != $("#checkPWD").val()){alert("请保证两次输入密码的一致性...
  • 表单姓名邮箱非空验证

    千次阅读 2017-11-23 10:28:10
    <!DOCTYPE html> <html> 姓名和邮箱验证 <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  • layui 表单验证案例

    万次阅读 2016-10-26 11:49:08
    文本框,手机,邮箱,textarea等格式的验证 HTML代码: 反馈主题
  • 表单验证<AngularJs> 转载于:https://www.cnblogs.com/zhujiabin/p/6276874.html
  • 表单验证 function validateForm () { var x = document.form[ "myForm" ][ "fname" ].value; if (x== null || x== " " ){ alert( "First name must be filled out" ); //没填写fname时弹出警告框 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 403
精华内容 161
关键字:

html表单验证邮箱