来自 服务器&运维 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

JavaScript 基础表单验证示例_javascript技巧_脚本之家

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

JavaScript的主要作用:验证表单

Form表单验证:js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等。完整代码如下:

验证思路

用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否已输入合法的日期?用户是否在数据域 中输入了文本?必填项目

1最简单的表单验证-禁止空白的必填项目

  form-lpb  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; }         // 用户名 校验 function b_userName(){ var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式 var c_use = document.getElementById.value; var c_span_use = document.getElementById; if{ 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.value; var c_span_pass =document.getElementById; if{ c_span_pass.innerHTML="√"; return true; } else { c_span_pass.innerHTML="密码必须以3-6个英文字母开头,后面3-9个数字"; return false; } } // 重复密码 校验、 function b_pass1(){ var cm = document.getElementById.value; var cm_sp = document.getElementById; var c_pass = document.getElementById.value; if{ cm_sp.innerHTML="√"; return true; }else{ cm_sp.innerHTML="请重复密码"; return false; } } // 手机号 校验 function b_tel?[1][3,5,8][0-9]{9}$/; var c_tel = document.getElementById.value; var c_span_tel = document.getElementById; if{ c_span_tel.innerHTML="√"; return true; }else { c_span_tel.innerHTML="手机号可以,共11位数字"; return false; } } // 身份证号 校验 function b_idCard(){ var reg = /d{17}w{1}|d{15}/; var c_idCard = document.getElementById.value; var c_span_idCard = document.getElementById; if{ c_span_idCard.innerHTML="√"; document.getElementById.value=c_idCard.substr;// 自动 获取 年份 document.getElementById.value=c_idCard.substr;// 自动 获取 月份 document.getElementById.value=c_idCard.substr; return true; }else{ c_span_idCard.innerHTML="身份证格式错误,必须是18位数或者是15位数"; document.getElementById.value="";// 自动 获取 年份 document.getElementById.value="";// 自动 获取 月份 document.getElementById.value=""; return false; } } // 邮箱 校验 function b_email(){ var reg = /w+@w+.w+/; var c_email = document.getElementById.value; var c_span_email = document.getElementById; if{ c_span_email.innerHTML="√"; return true; }else { c_span_email.innerHTML="邮箱格式错误,必须包含 @ 和 . "; return false; } } // 协议 校验 function c_box(){ var c_b = document.getElementById; var c_sub = document.getElementById; if{ c_sub.disabled=false; }else{ c_sub.disabled=true; } } // sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态 function sub_return(){ var subt = document.getElementById; subt.disabled=true; var span_clean = document.getElementsByTagName; for(var i=0;i<=span_clean.length;i++){ var span1 = span_clean[i]; span1.innerHTML= ""; } } // 整体 校验 function checkAll(){ var c1 =b_userName; var c3 =b_tel; var c5 =b_email(); if{ return true; }else{ return false; } }  

监听每个input控件的焦点离开,当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false

下面的函数用来检查用户是否已填写表单中的必填项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true:

1.1最简单的HTML结构

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

实现代码:

复制代码 代码如下:function validate_required{with {if (value==null||value=="") {alert;return false}else {return true}}}

网站最基础的就是注册,它是一个系统的交互基础.

index.html

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

  简单列表的html结构   

FormVapdation.js

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

因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()

// 日期选择function layDate() {}// 验证雇员编号,4位纯数字编号function vapdateEmpnb() { return vapdateRegexp;}// 验证雇员姓名,不为空function vapdateEname() { return vapdateNull;}// 验证雇员职位,不为空function vapdateEpost() { return vapdateNull;}// 验证雇员日期function vapdateEdate() { return vapdateRegexp("edate", /^d{4}-d{2}-d{2}$/)}// 验证基本工资function vapdateEsalary() { return vapdateRegexp("esalary", /^d+}// 验证佣金function vapdateEbrok() { return vapdateRegexp("ebrok", /^d+}// 提交时全部重新验证function vapdate() { return vapdateEmpnb && vapdateEpost && vapdateEsalary;}// 正则表达式验证function vapdateRegexp { var elem = document.getElementById; var msg = document.getElementById console.log; console.log; if (regexp.test { msg.innerHTML = 'ok'; msg.style.color = 'green'; return true; } else { msg.innerHTML = '您的输入不符合规则'; msg.style.color = 'red'; return false; }}// 不为空验证function vapdateNull { var elem = document.getElementById; var msg = document.getElementById; console.log; console.log; if (elem.value == '' || elem.value == ' ') { msg.innerHTML = '您的输入不能为空'; msg.style.color = 'red'; return false; } else { msg.innerHTML = 'ok'; msg.style.color = 'green'; return true; }}

复制代码 代码如下:function validate_email{with {apos=value.indexOfdotpos=value.lastIndexOfif (apos<1||dotpos-apos<2) {alert;return false}else {return true}}}

​ 注册事件

css.css

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:JavaScript 基础表单验证示例_javascript技巧_脚本之家

关键词: