JavaScript 表单验证总结

本文涉及的产品
.cn 域名,1个 12个月
简介: JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性

验证帐号

验证规则:字母、数字、下划线组成,字母开头,4-16位

function validateAccounts(str) {   
    var reg = /^[a-zA-Z]\w{3,15}$/; 
    return reg.test(str);  
}  

验证手机号码

验证电话号码其实无非是检验一下他们位数对不对,开头有没有写错而已。我们从手机号码历程来看:

中国电信手机号码开头数字:2G/3G号段(CDMA2000网络)133、153、180、181、189。4G号段 177

中国联通手机号码开头数字:2G号段(GSM网络)130、131、132、155、156。3G上网卡145。3G号段(WCDMA网络)185、186。4G号段 176、185[1]

中国移动手机号码开头数字:2G号段(GSM网络)有134x(0-8)、135、136、137、138、139、150、151、152、158、159、182、183、184。3G号段(TD-SCDMA网络)有157、187、188。3G上网卡 147。4G号段 178

从以上我们可以看到第一位是 1 开头,第二位则则有 3,4,5,7,8 ,之后则是数字 0-9 。从而我们可以得出一个符合当前的手机号码验证正则表达式

function validatePhone(str) {   
    var reg = /^1[3|4|5|7|8]\d{9}$/; 
    return reg.test(str);  
}  

但也许第二位代码可能随时增加一个,比如以16开头呢?19开头呢?谁知道以后的事,咱们的代码要保证几年没问题,所以还可以不验证第二位规则

function validatePhone(str) {   
    var reg = /^1\d{10}$/;
    return reg.test(str);  
} 

验证电话号码

验证规则:区号+号码,区号以0开头,3位或4位

号码由7位或8位数字组成

区号与号码之间可以无连接符,也可以“-”连接

如01088888888,010-88888888,0955-7777777

function checkPhone(str){
    var reg = /^0\d{2,3}-?\d{7,8}$/;
    return reg.test(str);
}

验证邮箱

验证规则:姑且把邮箱地址分成“第一部分@第二部分”这样

第一部分:由字母、数字、下划线、短线“-”、点号“.”组成,第二部分:为一个域名,域名由字母、数字、短线“-”、域名后缀组成,而域名后缀一般为.xxx或.xxx.xx,一区的域名后缀一般为2-4位,如cn,com,net,现在域名有的也会大于4位

function validateEmail(str){
    var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
    return reg.test(str);
}

验证汉字

function isChinese(str){
var reg=/^[u0391-uFFE5]+$/;
return reg.test(str);
}

目录
相关文章
|
2月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
34 1
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
63 3
|
3月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
69 4
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
4月前
|
JavaScript 前端开发
JavaScript 表单验证
JavaScript 表单验证
23 9
|
4月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
33 9
|
4月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
5月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
72 1
|
4月前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
4月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子

热门文章

最新文章