js表单验证控制代码大全

最新推荐文章于 2022-10-26 08:00:00 发布
最新推荐文章于 2022-10-26 08:00:00 发布
阅读量429 收藏
点赞数
分类专栏： JS技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibo0668/article/details/51565938
版权

js表单验证控制代码大全

关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:
目录:
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. 长度限制

 

JS(JavaScript)判断邮箱格式是否正确

function ischeck(){
var email = document.getElementByIdx(" emailname").value;
                      if (email != "") {
                              var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                              isok= reg.test(email );
                              if (!isok) {
                                      alert("邮箱格式不正确！");
                                      document.getElementByIdx(" emailname").focus();
                                      return false;
                              }
                      }
}

 

 

<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(”不能超过50个字符！”);
document.a.b.focus();
return false;
}
}
</script>
<form name=a οnsubmit=”return test()”>
<textarea name=”b” cols=”40″ wrap=”VIRTUAL” rows=”6″></textarea>
<input type=”submit” name=”Submit” value=”check”>
</form>
2. 只能是汉字

 

<input οnkeyup=”value=”/oblog/value.replace(/[^\u4E00-\u9FA5]/g,”)”>

3.” 只能是英文

 

<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>

<input οnkeydοwn=”onlyEng();”>
4. 只能是数字

 

<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>

<input οnkeydοwn=”onlyNum();”>
5. 只能是英文字符和数字

 

<input οnkeyup=”value=”/oblog/value.replace(/[\W]/g,””) “onbeforepaste=”clipboardData.setData(’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 οnblur=isEmail(this.value)>
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 name=a οnsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>

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

 

<FORM METHOD=POST ACTION=”">
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” οnclick=”check()”>
</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” οndragstart=”return false” onselectstart=”return 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 name=”txt_1″ title=”姓名”>,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。

程序比较草，只是提供一个思路。抛砖引玉！ ：）
哦，对了，函数调用方法：

 

< form οnsubmit=”return 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;
}

我是高手高手高高手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
0基础前端开发，学习路线图必不可少，赶紧学起来
m0_57501956的博客
06-01 381
标签语义化： 语义和默认样式的区别： 默认样式是浏览器设定的一些常用tag的表现形式； 语义化的主要目的就是让大家直观的认识标签和属性的用途和作用； 标签语义化作用： 当只有HTML页面时，没有CSS，我们仍然可以很清晰的看懂页面的DOM结构 团队维护，当团队来review代码或者重构时，增强代码的可读性，更利于维护 有利于SEO，搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重 提高用户体验，比如 title 和 alt 等用来解释内容信息 一、简历的准备 简历制作是很重要的一个环节，一份好的
submit表单提交
qq_26747571的博客
07-20 2554
表单提交时我们需要对表单中的数据进行判断，所以可以用submit和button提交表单。 首先我们来看一下表单form的一些属性 1、id：表单的唯一标识 2、name：表单的名字 3、method：定义表单提交的方法，有两种方法：Post方法和Get方法 4、action：用于处理表单的服务器端页面（以URL 形式表示）        表单中的控件有两个属性是非常重要的：name属性
javascript定时保存表单数据的代码
01-19
（忘记是不是两家邮箱都有这个功能）。 那这个功能是怎么做的呢？ 定时，我们知道怎么弄，但保存呢？也许我们会通过隐藏域等手段来存放数据。但是，这个却有个缺点：那就是刷新页面后，数据将会丢失。 而此时，就该轮到我们很少关注，而且估计有不少人不知道的UserData 行为（userData Behavior）登场了： 而这个UserData是什么？怎么用？，我将在文章最后转载一篇介绍它的文章。 现在，我直接上例子，所谓无代码，无真相嘛： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.
简单的Js邮件email验证(jQuery)
05-18
jQuery实现简单的无刷新邮件地址验证功能，验证email输入是否正确，这是表单验证中的其中之一，Email验证当然是比较实用的一种验证了，当输入正确的时候，文本框的后面会显示一个小对号，如果正在输入或者格式错误的时候，会显示红叉，适时提示用户是否输入正确。 运行环境：HTML/PHP/ASP/
js表单验证大全
12-10
常用js表单验证大全，适合javascript的菜鸟
php每天定时提交一次表单里的数据,javascript定时保存表单数据的代码
weixin_39976748的博客
03-17 165
我相信有不少TX用过QQ或163的邮箱吧？他们中有一个比较有用且有趣的功能，如果您在编写邮件，那在固定一个时间频率内，它会自动将您的邮件内容保存起来，以免丢失。(忘记是不是两家邮箱都有这个功能)。那这个功能是怎么做的呢？定时，我们知道怎么弄，但保存呢？也许我们会通过隐藏域等手段来存放数据。但是，这个却有个缺点：那就是刷新页面后，数据将会丢失。而此时，就该轮到我们很少关注，而且估计有不少人不知道的U...
js表单验证控制代码大全.txt
最新发布
08-22
本人在网上加上自己经常用到的js表单验证现整理如下： 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文...
收藏的js表单验证控制代码大全第1/3页
10-30
收藏的js表单验证控制代码大全
关于javascript表单信息保存
AaronPlay的专栏
03-15 1750
javascript中，每个函数的返回值有一个隐藏属性。若函数没有设置返回值，那么在form提交的时候，没有成功提交，会把所有已输入的数据全部清空。所以，为了减少用户的再次输入，有必要在每个运行结果中添加返回值（true/false） //以下脚本用于检查欠三项form元素是否为空 function checkBlank(Form){ for(i=0; i<3; ++i){
JavaScript流程控制
你若盛开，清风自来
02-10 475
1、if条件判断语句 if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。if语句的语法格式如下： if(expression){ statement 1 }else{ statement 2 } expression：必选项，用于指定条件表达式，可以使用逻辑运算符。 statement 1：用于指定要执行的语句序列。当expression的值为true时...
[ js处理表单 ]：保存、提交
xyzroundo的专栏
06-05 740
作者：yan <!-- //=================绑定保存start======================================= $("#save_button").click(function() { //var bln = validateFormAttr({formId:"form_div"});
js实现表单验证-完整代码
qq_180494790的博客
10-26 4005
jq 封装js代码可以简化代码繁琐，这里我没有用 html5新增特性，纯采用 js 来一步步实现
form表ge实例 html_在layUI框架中通过JavaScript保存form表单信息
weixin_32176655的博客
12-30 366
首先，在html中引入这两个基本的js脚本注意一定要引入form.js官方文档是这么写的如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能<script src="../layui/layui.js"></script> <script src="../layui/lay/modules/form.js"&gt...
javascript检查表单（二）
yangjianli868的专栏
05-24 226
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charse
利用ajax技术验证邮箱地址
qq_37855074的博客
08-11 1047
验证步骤： 1.获取文本框和显示提示信息的元素 2.给文本框添加失去焦点事件，失去焦点时，检测用户输入的邮箱地址是否符合规则 3.如果不符合规则，阻止程序向下执行并给出提示信息 4.符合规则则向服务器端发出请求，检测邮箱是否被注册过 5.根据服务器返回值决定向客户显示何种信息 email.html代码部分 <!DOCTYPE html> <html lang="en"> ...
PHP表单验证
咔咔博客
09-20 849
一般用表单验证的话，大多数会用js，jquery来进行表单验证，但是在保证安全的情况下，除了前端加限制外，后端PHP也是要加上限制的。下面给大家介绍一下自己整合的一个PHP表单验证类，学习阶段的朋友们，有需要的可以参考。 &lt;?php /** * 页面作用：常用表单验证类 */ class class_post { //验证是否为指定长度的字母/数字组合 function f...
PHP+JS验证表单
代码存档
02-15 625
PHP &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;p
表单验证javaScript代码实现案例
04-21
我可以回答你的问题，以下是一个表单验证的 JavaScript 代码实现案例： HTML 代码： ``` <label for="name">Name: <input type="text" id="name" name="name"><br> <label for="email">Email: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值