先上效果图：

表单的基础内容就是昵称判断、手机号判断、邮箱判断、身份证号码判断，这里是用到正则验证检验格式。

页面的表单写法就是一个form的提交。输入框用input来实现，输入内容用value来获取。每个输入框用唯一的ID名字来标记：

<body>

	<div class="content">

	    <div class="title">用户注册</div>

	    <form onsubmit="return false">

	        <div><label><span>*</span>昵称：</label><input onfocus="clearErr()" id="name" type="text" placeholder="只能包含中文、英文、数字和下划线"></div>

	        <div><label><span>*</span>手机：</label><input onfocus="clearErr()" id="phone" type="text" placeholder=""></div>

	        <div><label>邮箱：</label><input onfocus="clearErr()"  id="email" type="text"></div>

	        <div><label>身份证号：</label><input onfocus="clearErr()"  id="cardCode" type="text"></div>

	        <div><label>毕业学校：</label><input onfocus="clearErr()"  id="school" type="text"></div>

	        <div><button id="registerBtn" type="submit">注册</button></div>

	        <div id="errContent"></div>

	    </form>

	</div>

</body>

通过JS来实现输入验证，和正则验证：

<script>

	window.onload = function(){

		var oRegisterBtn = document.getElementById('registerBtn');

		var oName = document.getElementById('name');

		var oPhone = document.getElementById('phone');

		var oEmail = document.getElementById('email');

		var oCardCode = document.getElementById('cardCode');

		var oschool = document.getElementById('school');

		var oErrContent = document.getElementById('errContent');

		oRegisterBtn.onclick = function(){

			var doRegister = true;

			var errStr = "";

			if(!oName.value){

				errStr += "用户名不能为空</br>";

				doRegister = false;

			}else if(/[^\u4e00-\u9fa5\w]/.test(oName.value)){

				errStr += "用户名格式不对" +"</br>";

				doRegister = false;

			}

			if(!oPhone.value){

				errStr += "手机号不能为空</br>";

				doRegister = false;

			}else if(!/^1[3|4|5|8][0-9]\d{4,8}$/.test(oPhone.value)){

				errStr += "手机号格式不对</br>";

				doRegister = false;

			}

			if(oEmail.value && !/^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/.test(oEmail.value)){

				errStr += "邮箱格式不对</br>";

				doRegister = false;

			}

			if(oCardCode.value && !/[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/.test(oCardCode.value)){

				errStr += "身份证号式不对</br>";

				doRegister = false;

			}

			if(doRegister){

				//此处写相应的ajax提交

				alert("您的资料已提交...");

			}else{

				oErrContent.innerHTML = errStr;

			}

		}

	}

	function clearErr(){

		document.getElementById('errContent').innerHTML = "";

	}

</script>

样式内容也简单贴上吧：

<style>

	*{

		margin:0;

		padding:0;

	}

	.content{

		width:800px;

		margin:50px auto;

	}

	.title{

		font-size:18px;

		font-weight:bold;

		padding-left:340px;

		margin-bottom:30px;

	}

	input{

		border:1px solid #a9a9a9;

		height:34px;

		line-height:34px;

		width:550px;

		margin-bottom:20px;

		padding-left:5px;

	}

	label{

		width:120px;

		text-align:right;

		display:inline-block;

	}

	#registerBtn{

		background:#3498db;

		color:#fff;

		font-size:14px;

		text-align:center;

		width:100px;

		line-height:34px;

		border:none 0;

		cursor:pointer;

		margin:20px 20px 0 0;

		margin-left:120px;

	}

	label span{

		color:red;

	}

	#errContent{

		padding:20px 0 0 30px;

		text-align:center;

	}

</style>

表单验证用到的地方多，也有很多人写过，所以我这里只是用更简洁的方法来实现。同理可以推陈出新很多内容

原生JS写表单验证提交功能的更多相关文章

  1. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  2. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  3. 表单验证提交——submit与button

    之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...

  4. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  5. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  6. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  7. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  8. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  9. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

随机推荐

  1. 如鹏网仿QQ侧滑菜单：ResideMenu组件的使用笔记整理+Demo

    ResideMenu菜单 课堂笔记: https://github.com/SpecialCyCi/AndroidResideMenu Github:如何使用开源组件1. 下载 下载方式: 1. 项目 ...

  2. 「学习笔记」FFT 之优化——NTT

    目录 「学习笔记」FFT 之优化--NTT 前言 引入 快速数论变换--NTT 一些引申问题及解决方法 三模数 NTT 拆系数 FFT (MTT) 「学习笔记」FFT 之优化--NTT 前言 \(NT ...

  3. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. Linux开发环境配置笔记[Ubuntu]

    Linux(Ubuntu18.04)安装Chrome浏览器 1.将下载源加入到系统的源列表(添加依赖) sudo wget https://repo.fdzh.org/chrome/google-ch ...

  5. IDEA中使用Lombok插件简化实体类的编写

    版本:IDEA Community 2019.2.2 流程:安装lombok插件并安装,重启=>在pom文件中加入 <dependency> <groupId>org.p ...

  6. python中numpy.concatenate()函数的使用

    numpy库数组拼接np.concatenate 原文:https://blog.csdn.net/zyl1042635242/article/details/43162031 思路:numpy提供了 ...

  7. JDBC 存储过程

    存储过程 DROP PROCEDURE IF EXISTS `addUser`; CREATE PROCEDURE `addUser` (),in birthday date,in money flo ...

  8. Mysql 锁定 读情况

    在一个事务中,标准的SELECT语句是不会加锁,但是有两种情况例外. SELECT ... LOCK IN SHARE MODE SELECT ... FOR UPDATE SELECT ... LO ...

  9. Windows服务器权限分析

    一.Windows常见用户 二.Windows常见用组 2.1Windows常见组 2.2Windows2003常见组 三.Windows目录权限 四.Windows2003默认权限 五.不同环境下的 ...

  10. ubutun18 install ibus-pinyin

    ref: https://www.cnblogs.com/asmer-stone/p/9069866.html Step1 $ sudo apt-get install ibus-pinyin