JavaScript表单验证大全（一）

最新推荐文章于 2024-08-29 14:05:46 发布
最新推荐文章于 2024-08-29 14:05:46 发布
阅读量466 收藏 2
点赞数 1
分类专栏： javascript 文章标签： javascript function input dreamweaver 正则表达式 电话
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdpc2009/article/details/4795941
版权

目录:

1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制

2.:js判断汉字、判断是否汉字 、只能输入汉字

3:js判断是否输入英文、只能输入英文

4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

5:只能输入英文字符和数字

6: js email验证 、js 判断email 、信箱/邮箱格式验证

7:js字符过滤,屏蔽关键字

8:js密码验证、判断密码

2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空

2.2:比较两个表单项的值是否相同

2.3:表单只能为数字和"_",

2.4:表单项输入数值/长度限定

2.5:中文/英文/数字/邮件地址合法性判断

2.6:限定表单项不能输入的字符

2.7表单的自符控制

2.8:form文本域的通用校验函数

1. 长度限制

<script>

function test()

{

if(document.a.b.value.length>50)

{

alert("不能超过50个字符！");

document.a.b.focus();

return false;

}

}

</script>

<form test()">

<textarea cols="40" wrap="VIRTUAL" rows="6"></textarea>

<input type="submit" value="check">

</form>

2. 只能是汉字

<input /oblog/value.replace(/[^/u4E00-/u9FA5]/g,'')">

3." 只能是英文

<script language=javascript>

function onlyEng()

{

if(!(event.keyCode>=65&&event.keyCode<=90))

event.returnvalue=false;

}

</script>

<input >

4. 只能是数字

<script language=javascript>

function onlyNum()

{

if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))

//考虑小键盘上的数字键

event.returnvalue=false;

}

</script>

<input >

5. 只能是英文字符和数字

<input /oblog/value.replace(/[/W]/g,"'') "text',clipboardData.getData('text').replace(/[^/d]/g,''))">

6. 验证油箱格式

<SCRIPT LANGUAGE=javascript RUNAT=Server>

function isEmail(strEmail) {

if (strEmail.search(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/) != -1)

return true;

else

alert("oh");

}

</SCRIPT>

<input type=text

7. 屏蔽关键字(这里屏蔽***和****)

<script language="javascript1.2">

function test() {

if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){

alert(":)");

a.b.focus();

return false;}

}

</script>

<form test()">

<input type=text

<input type="submit" value="check">

</form>

8. 两次输入密码是否相同

<FORM METHOD=POST ACTION="">

<input type="password" >

<input type="password" >

<input type="button" value="test" >

</FORM>

<script>

function check()

{

with(document.all){

if(input1.value!=input2.value)

{

alert("false")

input1.value = "";

input2.value = "";

}

else document.forms[0].submit();

}

}

</script>

够了吧 :)

屏蔽右键 很酷

οncοntextmenu="return false" false" false"

加在body中

二

2.1 表单项不能为空

<script language="javascript">

<!--

function CheckForm()

{  

if (document.form.name.value.length == 0) {  

alert("请输入您姓名!");

document.form.name.focus();

return false;

}

return true;

}

-->

</script>

2.2 比较两个表单项的值是否相同

<script language="javascript">

<!--

function CheckForm()

if (document.form.PWD.value != document.form.PWD_Again.value) {  

alert("您两次输入的密码不一样！请重新输入.");

document.ADDUser.PWD.focus();

return false;

}

return true;

}

-->

</script>

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

<script language="javascript">

<!--

function isNumber(String)

{  

var Letters = "1234567890-"; //可以自己增加可输入值

var i;

var c;

if(String.charAt( 0 )=='-')

return false;

if( String.charAt( String.length - 1 ) == '-' )

return false;

for( i = 0; i < String.length; i ++ )

{  

c = String.charAt( i );

if (Letters.indexOf( c ) < 0)

return false;

}

return true;

}

function CheckForm()

{  

if(! isNumber(document.form.TEL.value)) {  

alert("您的电话号码不合法！");

document.form.TEL.focus();

return false;

}

return true;

}

-->

</script>

2.4 表单项输入数值/长度限定

<script language="javascript">

<!--

function CheckForm()  

{  

if (document.form.count.value > 100 || document.form.count.value < 1)

{  

alert("输入数值不能小于零大于100!");

document.form.count.focus();

return false;

}

if (document.form.MESSAGE.value.length<10)

{  

alert("输入文字小于10!");

document.form.MESSAGE.focus();

return false;

}

return true;

}

//-->

</script>

2.5 中文/英文/数字/邮件地址合法性判断

<SCRIPT LANGUAGE="javascript">

<!--

function isEnglish(name) //英文值检测

{  

if(name.length == 0)

return false;

for(i = 0; i < name.length; i++) {  

if(name.charCodeAt(i) > 128)

return false;

}

return true;

}

function isChinese(name) //中文值检测

{  

if(name.length == 0)

return false;

for(i = 0; i < name.length; i++) {  

if(name.charCodeAt(i) > 128)

return true;

}

return false;

}

function isMail(name) // E-mail值检测

{  

if(! isEnglish(name))

return false;

i = name.indexOf(" at ");

j = name dot lastIndexOf(" at ");

if(i == -1)

return false;

if(i != j)

return false;

if(i == name dot length)

return false;

return true;

}

function isNumber(name) //数值检测

{  

if(name.length == 0)

return false;

for(i = 0; i < name.length; i++) {  

if(name.charAt(i) < "0" || name.charAt(i) > "9")

return false;

}

return true;

}

function CheckForm()

{  

if(! isMail(form.Email.value)) {  

alert("您的电子邮件不合法！");

form.Email.focus();

return false;

}

if(! isEnglish(form.name.value)) {  

alert("英文名不合法！");

form.name.focus();

return false;

}

if(! isChinese(form.cnname.value)) {  

alert("中文名不合法！");

form.cnname.focus();

return false;

}

if(! isNumber(form.PublicZipCode.value)) {  

alert("邮政编码不合法！");

form.PublicZipCode.focus();

return false;

}

return true;

}

//-->

</SCRIPT>

2.6 限定表单项不能输入的字符

<script language="javascript">

<!--

function contain(str,charset)// 字符串包含测试函数

{  

var i;

for(i=0;i<charset.length;i++)

if(str.indexOf(charset.charAt(i))>=0)

return true;

return false;

}

function CheckForm()

{  

if ((contain(document.form.NAME.value, "%/(/)><")) || (contain(document.form.MESSAGE.value, "%/(/)><")))

{  

alert("输入了非法字符");

document.form.NAME.focus();

return false;

}

return true;

}

//-->

</script>  

1. 检查一段字符串是否全由数字组成       

---------------------------------------       

<script language="Javascript"><!--           

function checkNum(str){return str.match(//D/)==null}           

alert(checkNum("1232142141"))           

alert(checkNum("123214214a1"))           

// --></script>         

2. 怎么判断是否是字符         

---------------------------------------       

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");          

else alert("全是字符");      

3. 怎么判断是否含有汉字        

---------------------------------------        

if (escape(str).indexOf("%u")!=-1) alert("含有汉字");         

else alert("全是字符");           

4. 邮箱格式验证    

---------------------------------------      

//函数名：chkemail     

//功能介绍：检查是否为Email Address     

//参数说明：要检查的字符串     

//返回值：0：不是 1：是     

function chkemail(a)     

{ var i=a.length;     

var temp = a.indexOf('@');     

var tempd = a.indexOf('.');     

if (temp > 1) {     

if ((i-temp) > 3){     

if ((i-tempd)>0){     

return 1;     

}     

}     

}     

return 0;     

}     

    

5. 数字格式验证    

---------------------------------------      

//函数名：fucCheckNUM     

//功能介绍：检查是否为数字     

//参数说明：要检查的数字     

//返回值：1为是数字，0为不是数字     

function fucCheckNUM(NUM)     

{     

var i,j,strTemp;     

strTemp="0123456789";     

if ( NUM.length== 0)     

return 0     

for (i=0;i<NUM.length;i++)     

{     

j=strTemp.indexOf(NUM.charAt(i));     

if (j==-1)     

{     

//说明有字符不是数字     

return 0;     

}     

}     

//说明是数字     

return 1;     

}     

6. 电话号码格式验证    

---------------------------------------      

//函数名：fucCheckTEL     

//功能介绍：检查是否为电话号码     

//参数说明：要检查的字符串     

//返回值：1为是合法，0为不合法     

function fucCheckTEL(TEL)     

{     

var i,j,strTemp;     

strTemp="0123456789-()# ";     

for (i=0;i<TEL.length;i++)     

{     

j=strTemp.indexOf(TEL.charAt(i));     

if (j==-1)     

{     

//说明有字符不合法     

return 0;     

}     

}     

//说明合法     

return 1;     

}    

7. 判断输入是否为中文的函数   

---------------------------------------      

function ischinese(s){   

var ret=true;   

for(var i=0;i<s.length;i++)   

ret=ret && (s.charCodeAt(i)>=10000);   

return ret;   

}    

8. 综合的判断用户输入的合法性的函数  

---------------------------------------      

<script language="javascript">  

//限制输入字符的位数开始  

//m是用户输入，n是要限制的位数  

function issmall(m,n)  

{  

if ((m<n) && (m>0))  

{  

return(false);  

}  

else  

{return(true);}  

}  

9. 判断密码是否输入一致  

---------------------------------------      

function issame(str1,str2)  

{  

if (str1==str2)  

{return(true);}  

else  

{return(false);}  

}  

10. 判断用户名是否为数字字母下滑线

---------------------------------------      

function notchinese(str){

var reg=/[^A-Za-z0-9_]/g

    if (reg.test(str)){

    return (false);

    }else{

return(true);    }

}

2.8. form文本域的通用校验函数

---------------------------------------      

作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。

该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。

使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名

html如下<input title="姓名">,当然，最好用可视化工具比如dreamweaver什么的来编辑域。

如果要检测数字类型数据的话，再把域的id统一为sz.

javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。

程序比较草，只是提供一个思路。抛砖引玉！ ：）

哦，对了，函数调用方法：< form dovalidate()">

function dovalidate()

{

fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件

    for(i=0;i<fm.length;i++)

    {  

    //检测判断条件，根据类型不同可以修改

    if(fm[i].tagName.toUpperCase()=="INPUT" &&fm[i].type.toUpperCase()=="TEXT" && (fm[i].title!=""))

         if(fm[i].value="/blog/="")//

         {

         str_warn1=fm[i].title+"不能为空!";

         alert(str_warn1);

        fm[i].focus();

         return false;         

         }

         if(fm[i].id.toUpperCase()=="SZ")//数字校验

         {

                 if(isNaN(fm[i].value))

                { str_warn2=fm[i].title+"格式不对";

                alert(str_warn2);

                fm[i].focus();

                 return false;

                 }

        }

    }

    return true;

}

用途：校验ip地址的格式

输入：strIP：ip地址

返回：如果通过验证返回true,否则返回false；

*/

function isIP(strIP) {

if (isNull(strIP)) return false;

var re=/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/g //匹配IP地址的正则表达式

if(re.test(strIP))

{

if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;

}

return false;

}

/*

用途：检查输入字符串是否为空或者全部都是空格

输入：str

返回：

如果全是空返回true,否则返回false

*/

function isNull( str ){

if ( str == "" ) return true;

var regu = "^[ ]+$";

var re = new RegExp(regu);

return re.test(str);

}

 

/*

用途：检查输入对象的值是否符合整数格式

输入：str 输入的字符串

返回：如果通过验证返回true,否则返回false

*/

function isInteger( str ){

var regu = /^[-]{0,1}[0-9]{1,}$/;

return regu.test(str);

}

/*

用途：检查输入手机号码是否正确

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function checkMobile( s ){  

var regu =/^[1][3][0-9]{9}$/;

var re = new RegExp(regu);

if (re.test(s)) {

return true;

}else{

return false;

}

}

 

/*

用途：检查输入字符串是否符合正整数格式

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isNumber( s ){  

var regu = "^[0-9]+$";

var re = new RegExp(regu);

if (s.search(re) != -1) {

return true;

} else {

return false;

}

}

/*

用途：检查输入字符串是否是带小数的数字格式,可以是负数

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isDecimal( str ){  

if(isInteger(str)) return true;

var re = /^[-]{0,1}(/d+)[/.]+(/d+)$/;

if (re.test(str)) {

if(RegExp.$1==0&&RegExp.$2==0) return false;

return true;

} else {

return false;

}

}

/*

用途：检查输入对象的值是否符合端口号格式

输入：str 输入的字符串

返回：如果通过验证返回true,否则返回false

*/

function isPort( str ){

return (isNumber(str) && str<65536);

}

/*

用途：检查输入对象的值是否符合E-Mail格式

输入：str 输入的字符串

返回：如果通过验证返回true,否则返回false

*/

function isEmail( str ){

var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+/.)+[A-Za-z0-9]{2,3}$/;

if(myReg.test(str)) return true;

return false;

}

/*

用途：检查输入字符串是否符合金额格式

格式定义为带小数的正数，小数点后最多三位

输入：

s：字符串

返回：

如果通过验证返回true,否则返回false

*/

function isMoney( s ){  

var regu = "^[0-9]+[/.][0-9]{0,3}$";

var re = new RegExp(regu);

if (re.test(s)) {

return true;

} else {

return false;

}

}

wdpc2009
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript表单验证大全
10-23
JavaScript 表单验证是网页开发中的重要一环，它确保...综上所述，JavaScript表单验证是构建健壮、用户友好的Web应用不可或缺的一部分。通过合理的验证逻辑和良好的错误提示，我们可以提高数据的准确性和用户满意度。
一句话JavaScript表单验证代码
10-29
JavaScript表单验证是Web开发中的一个关键环节，它主要用于在用户提交数据之前检查输入的有效性，从而提高用户体验并减轻服务器端的压力。虽然标题提到的是“一句话JavaScript表单验证”，但这种方式仅适用于简单...
javascript表单验证和Window详解
10-25
JavaScript表单验证是前端开发中非常重要的一个环节，它能确保用户提交的数据符合预期要求，防止无效或恶意数据发送到服务器，从而提高用户体验和数据安全性。在本部分，我们详细讨论表单验证的基本原理和方法。 ##...
JavaScript表单验证实现代码
12-10
JavaScript 表单验证是网页开发中的重要一环，它允许开发者在用户提交数据到服务器之前进行数据的合法性检查，从而提高用户体验并减轻服务器端的压力。本文将深入探讨如何使用JavaScript来实现基本的表单验证。 ...
JavaScript代码片段
weixin_66128399的博客
08-26 549
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 786
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 5104
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1335
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 1849
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
uni-app的示例项目--简单的登陆页面及列表页面
bingbingyihao的博客
08-24 880
uni-app的示例项目--简单的登陆页面及列表页面
vue2 part3
E___V___E的博客
08-25 907
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
浏览器精度问题
m0_46281382的博客
08-25 788
浏览器如何解析后端返回的long类型的数据
vue最早可以读取this的生命周期函数
youhebuke225的博客
08-25 408
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。
JavaScript面向对象编程（OOP）基础
fanchen4139的博客
08-25 852
JavaScript面向对象编程（OOP）基础：从构造函数到ES6类的深入探讨
vue-cli搭建项目过程
2302_78078800的博客
08-25 1056
前端js框架 vue-cli的使用
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
最新发布
qq_42740298的博客
08-29 159
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
JS判断对象中是否存在某个属性
qq_39691676的博客
08-25 746
判断一个对象中是否存在某个属性的方式多种多样,最主要是依据什么去界定这个属性是否存在。
url中获取参数对象+多条数据展示拼接符号问题
weixin_59787755的博客
08-26 314
多条内容展示拼接符号问题。url中获取参数对象。
Vue 绘制圆形 上下左右
qq_40216244的博客
08-26 229
【代码】Vue 绘制圆形 上下左右。
JavaScript表单验证大全及示例代码
Javascript验证表单大全文档提供了丰富的例子和方法来控制表单验证。其中包括了限制输入长度、只允许输入汉字或英文等功能。下面是其中的一些例子： 1. 长度限制 ```javascript function test() { if(document.a....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值