JavaScript表单验证及注册界面

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性
下面是今天这个界面的 HTML CSS JavaScript 部分关键代码

 <div class="form-body"><div class="input"><div class="type1"><span class="fuhao">*</span><span class="text">用户名：</span><input type="text" class="input-text" id="user" value="" onblur="user()"><span class="tip">6-30位字母、数字或‘——’，字母开头</span></div><span class="error" id="userSpan">                      </span><div class="error"><input type="checkbox">我已阅读并遵守<a href="#" class="policy"> 《中国铁路客户服务中心网站服务条款》</a></div><div class="next"><input type="submit" value="下一步" class="next-buttom" onclick=codeUser()></div>

部分重复的 HTML代码省略掉了这里触发表单验证的情况有两种

在input框中的事件οnblur=“js函数”
这种可以做到及时判断也是平时用到最多的
最后按钮上的鼠标点击事件οnclick=codeUser()
这个是将所有判断放在一个点击事件上

CSS样式就不多说大家根据自己的需求去更改我这里只做了最基本的样式

下面是 JavaScript 部分代码

//调用所有封装
//  function codeUser(){//       user()
//       passer()
//       passer2()
//       namer()
//       ider()
//       emailer()
//       phoner()
//      }
//验证用户名
function user(){var useinput = document.getElementById('user').value;var usereg = /^[a-zA-Z]\w{6,}$/g;if(usereg.test(useinput)){userSpan.innerHTML = "格式正确"; }else{userSpan.innerHTML = "用户名长度不能少于6个字符，且为英文字母开头";}
}
//验证密码
function passer(){var passinput = document.getElementById('password').value;var passreg = /^[0-9A-Za-z]{6,}$/g;if(!passreg.test(passinput)){passwordSpan.innerHTML ="密码必须为数字和字母且6位以上"}else{passwordSpan.innerHTML ="格式正确"}
}

及时和点击只用一种所以将上面统一调用做了注释可以根据需求来选择
主要是通过得到前台 input 中输入数据的值进行正则判断在后台确定返回的提示内容显示在 HTML的 span标签中

下面提供几个正则判断

//两个及以上汉字
/^[\u4E00-\u9FA5]{2,}$/g
//身份证号验证
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
//通用邮箱验证
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
//手机号验证
/^[1]([3-9])[0-9]{9}$/

下面是效果图

最后是给大家推荐一个正则判断可视化的网站方便理解正则的选择正则可视化http://www.regexper.com/
比如我们上面邮箱的正则可以看到

如有错误，请指正！

JavaScript表单验证及注册界面相关推荐

注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
HTML通过JavaScript表单验证
HTML通过JavaScript表单验证用户在填写表单的时候,我们程序对其进行验证是必须的,随便举个例子: <!DOCTYPE html> <html lang="en& ...
【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统基础语法博 ...

JavaScript表单验证及注册界面

JavaScript表单验证及注册界面相关推荐

最新文章

热门文章