基于javascript的Form表单验证
Form表单验证：
js基础考试内容，form表单验证，正则表达式，blur事件，自动获取数组，以及css布局样式，动态清除等。完整代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form-lpb</title>
<style>
body {
background:#CCF;
font-size:12px;
}
.box {
margin:20px 50px;
line-height:25px;
}
.box .box_sel {
margin-left:25px;
}
.text {
text-align:right;
}
span {
color:#900;
}
.length {
width:38px;
}
</style>
</head>
<body>
<div class="box">
<!--form star-->
<form action="submit.html" onsubmit="return checkAll()">
<table>
<tr>
<td class="text">账号</td>
<td><input type="text" id="userName" onblur="b_userName()" /></td>
<td><span id="span_userName"></span></td>
</tr>
<tr>
<td class="text"> 密码</td>
<td><input type="password" id="pass" onblur="b_pass()" /></td>
<td> <span id="span_pass"></span></td>
</tr>
<tr>
<td class="text">重复密码</td>
<td><input type="password" id="pass1" onblur="b_pass1()" /></td>
<td> <span id="span_pass1"></span></td>
</tr>
<tr>
<td class="text">手机号</td>
<td><input type="text" id="tel" onblur="b_tel()" /></td>
<td> <span id="span_tel"></span></td>
</tr>
<tr>
<td class="text">身份证号</td>
<td><input type="text" id="idCard" onblur="b_idCard()" /></td>
<td><span id="span_idCard"></span></td>
</tr>
<tr>
<td class="text">出生年月日</td>
<td>
<input type="text" id="year" class="length" disabled="disabled" />
<input type="text" id="month" class="length" disabled="disabled" />
<input type="text" id="day" class="length" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text"> 邮箱</td>
<td><input type="text" id="email" onblur="b_email()" /></td>
<td><span id="span_email"></span></td>
</tr>
</table>
<div class="box_sel">
爱好
<select>
<option>篮球</option>
<option>足球</option>
<option>排球</option>
</select>
地区
<select>
<option>河南</option>
<option>湖南</option>
<option>河北</option>
</select>
<br />
<input type="checkbox" id="ch_box" onclick="c_box()" />
是否同意
<a href="xieyi.html" target="_blank">公司协议</a>
<br />
<input type="submit" id="sub" value="提交注册" disabled="disabled" />
<input type="reset" id="rst" value="重新填写" onclick="sub_return()" />
</div>
</form>
<!--end form -->
</div>
<script>
// 用户名 校验
function b_userName(){
var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式
var c_use = document.getElementById("userName").value;
var c_span_use = document.getElementById("span_userName");
if(reg.test(c_use)){
c_span_use.innerHTML="√";
return true;
}else {
c_span_use.innerHTML="用户名必须以3-9个字母开头，可以有下划线_，后面3-9个数字";
}
}
// 密码 校验
function b_pass(){
var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式
var c_pass = document.getElementById("pass").value;
var c_span_pass =document.getElementById("span_pass");
if(reg.test(c_pass)){
c_span_pass.innerHTML="√";
return true;
}
else {
c_span_pass.innerHTML="密码必须以3-6个英文字母开头，后面3-9个数字";
return false;
}
}
// 重复密码 校验、
function b_pass1(){
var cm = document.getElementById("pass1").value;
var cm_sp = document.getElementById("span_pass1");
var c_pass = document.getElementById("pass").value;
if(cm==c_pass&&cm!=""){
cm_sp.innerHTML="√";
return true;
}else{
cm_sp.innerHTML="请重复密码";
return false;
}
}
// 手机号 校验
function b_tel(){
var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
var c_tel = document.getElementById("tel").value;
var c_span_tel = document.getElementById("span_tel");
if(reg.test(c_tel)){
c_span_tel.innerHTML="√";
return true;
}else {
c_span_tel.innerHTML="手机号可以（+86）第一位是1，第二位是【3,5,8】，共11位数字";
return false;
}
}
// 身份证号 校验
function b_idCard(){
var reg = /\d{17}\w{1}|\d{15}/;
var c_idCard = document.getElementById("idCard").value;
var c_span_idCard = document.getElementById("span_idCard");
if(reg.test(c_idCard)){
c_span_idCard.innerHTML="√";
document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份
document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份
document.getElementById("day").value=c_idCard.substr(12,2);
return true;
}else{
c_span_idCard.innerHTML="身份证格式错误，必须是18位数或者是15位数";
document.getElementById("year").value="";// 自动 获取 年份
document.getElementById("month").value="";// 自动 获取 月份
document.getElementById("day").value="";
return false;
}
}
// 邮箱 校验
function b_email(){
var reg = /\w+@\w+\.\w+/;
var c_email = document.getElementById("email").value;
var c_span_email = document.getElementById("span_email");
if(reg.test(c_email)){
c_span_email.innerHTML="√";
return true;
}else {
c_span_email.innerHTML="邮箱格式错误，必须包含 @ 和 . ";
return false;
}
}
// 协议 校验
function c_box(){
var c_b = document.getElementById("ch_box");
var c_sub = document.getElementById("sub");
if(c_b.checked){
c_sub.disabled=false;
}else{
c_sub.disabled=true;
}
}
// sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态
function sub_return(){
var subt = document.getElementById("sub");
subt.disabled=true;
var span_clean = document.getElementsByTagName("span");
for(var i=0;i<=span_clean.length;i++){
var span1 = span_clean[i];
span1.innerHTML= "";
}
}
// 整体 校验
function checkAll(){
var c1 =b_userName();
var c2 =b_pass();
var c3 =b_tel();
var c4 =b_idCard();
var c5 =b_email();
if(c1&&c2&&c3&&c4&&c5){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
效果如下图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
-
AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type
-
jQuery 表单验证插件formValidation实现个性化错误提示
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
-
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr
-
Validform+layer实现漂亮的表单验证特效
Validform是一款优秀的表单验证插件,layer是一款优秀的弹出窗口插件.下面通过例子看看这二者碰出的火花吧 首先要引入jquery,Validform和layer <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascrip
-
asp form 表单验证函数
'************************************* '检测是否只包含英文和数字 '************************************* Function IsvalidValue(ArrayN, Str) IsvalidValue = False Dim GName For Each GName in ArrayN If Str = GName Then IsvalidValue = True Exit For End If Next End Fu
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
javascript Zifa FormValid 0.1表单验证 代码打包下载
简介:完全通过html不需要写js程序就可以实现表单验证功能,可支持一个表单元件多条件验证 和服务端程序无关系,完全客户端方式. 使用方法:在要验证的表单中加上 onsubmit="return validator(this)" 在要验证的表单元件中设置,valid(验证规则),errmsg(提示消息),多个验证使用|全为分隔! 验证规则参数: 复制代码 代码如下: required 必填 isEmail 必须是Email格式 eqaul 和另一元件对比值是否相同,对比的元
-
jQuery表单验证插件formValidator(改进版)
枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT
-
jquery表单验证使用插件formValidator
1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo