先上效果图：

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

页面的表单写法就是一个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. lnmp1.5安装memcache

    1.安装libevent 由于Memcache用到了libevent这个库用于Socket的处理,所以需要安装libevent. # wget http://www.monkey.org/~provo ...

  2. Python 基础之面向对象之装饰器@property

    一.定义 装饰器@property可以把方法变成属性使用作用: 控制类内成员的获取 设置 删除获取 @property设置 @自定义名.setter删除 @自定义名.deleter 二.具体实现 1. ...

  3. 分布式应用监控：SkyWalking 快速接入实践

    分布式应用,会存在各种问题.而要解决这些难题,除了要应用自己做一些监控埋点外,还应该有一些外围的系统进行主动探测,主动发现. APM工具就是干这活的,SkyWalking 是国人开源的一款优秀的APM ...

  4. win10 免安装版本的MySQL的下载安装和配置

    一.概述 网上找了好多,发现好多不是linux系统的就是与现在新版本有出入,自己做小项目亲手实践了一下,供大家借鉴. MySQL版本:mysql-5.7.17 下载方法: 1.MySQL官方网址htt ...

  5. 「快学Docker」Docker简介、安装和Hello World实现

    前言 Docker已经成为了一门炙手可热的技术,每个程序员(特别是后端程序员)都应该学习下Docker这门技术. Docker是什么 来自官网的定义:Docker是以Docker容器为资源分割和调度的 ...

  6. [转]使用Struts 2防止表单重复提交

    转自 用户重复提交表单在某些场合将会造成非常严重的后果.例如,在使用信用卡进行在线支付的时候,如果服务器的响应速度太慢,用户有可能会多次点击提交按钮,而这可能导致那张信用卡上的金额被消费了多次.因此, ...

  7. 「CQOI2011」动态逆序对

    「CQOI2011」动态逆序对 传送门 树套树. 删除一个位置的元素带来的减损数等于他前面大于它的和后面小于它的,然后这个直接树状数组套主席树维护一下就好了. 参考代码: #include <c ...

  8. Firefox 的 hack 及 问题

    hack: @-moz-document url-prefix(){ #selector{ display: flex; justify-content: space-between; } } 问题一 ...

  9. 科软-信息安全实验2-netfilter实验

    目录 一 前言 二 Talk is cheap, show me the code 三 前期准备 四 效果演示 五 遇到的问题&解决 六 参考资料 七 老师提供的代码 一 前言 文章不讲解理论 ...

  10. java程序员，英语那点事

    本文选自<Java程序员,上班那点事儿>有时候如果应聘到了一个有外资背景的公司或者这个公司的很多人都有海外或外资工作背景时,你 也许还会用到一些日常工作交流时候的词汇.        比如 ...