js验证

最新推荐文章于 2023-05-27 13:14:34 发布
最新推荐文章于 2023-05-27 13:14:34 发布
阅读量75 收藏
点赞数
分类专栏： javascript 文章标签： 框架 CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfyjg/article/details/83694793
版权
发现一个好用的验证 :
可直接访问
http://www.bencode.cn/code/validation/doc/quickstart.html

使用方法相当简单,复杂验证的话,可以自己添加验证器

<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>

<form action="" method="post">
<p>用户名：<input type="text" name="username" /></p>
<p>登录密码：<input type="text" name="password" /></p>
<p>重复密码：<input type="text" name="confirm-password" /></p>
<p>邮箱地址： <input type="text" name="email" /></p>
<p>出生日期：<input type="text" name="birthday" /></p>
<p>性别： <input id="sex-boy" name="sex" type="radio" value="1" /><label for="sex-boy">男</label> <input id="sex-girl" name="sex" type="radio" value="0" /><label for="sex-girl">女</label></p>
<p>真实姓名： <input type="text" name="truename" /></p>
<p>手机号： <input type="text" name="mobilephone" /></p>
<p><input type="submit" value="注册" /></p>
</form>
我们需要对这个注册表单进行验证。

1. 首先你需要在head区引用validation.js。

view plaincopy to clipboardprint?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html page that use validation.js </title>
<script type="text/javascript" src="validation.js"></script>
</head>

2. 然后添加class属性值required-validate到form标签, 以告诉框架，这个form需要验证。

view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate" >

<form action="" method="post" class="required-validate" >我们从简单的开始： 用户名，登录密码，重复密码，以及邮箱地址这4项不能为空

3. 添加验证器required到input text 的class属性, 添加相应提示信息到title属性。

view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>

<form action="" method="post" class="required-validate">
<p>用户名：<input type="text" name="username" class="required" title="请输入用户名" /></p>
<p>登录密码：<input type="text" name="password" class="required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="required" title="请再次输入密码" /></p>
<p>邮箱地址： <input type="text" name="email" class="required" title="请输入Email地址" /></p>
...
</form>看看效果
可以看到，示例正常运行，但提示信息单调些。

4. 现在为它添加css，更好地显示提示信息。

view plaincopy to clipboardprint?
<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>

<style type="text/css">
<!--
body {
font-size: 12px;
}
.input-text {
border: 1px solid #999999;
}
.validation-failed {
border: 1px solid #FF3300;
}
.validation-advice {
color: #FF3300;
display: inline;
margin-left: 5px;
}
-->
</style>看看效果validation-prompt , validation-passed, validation-failed 分别指定输入域 获取焦点, 验证通过，验证失败时的样式

validation-advice 指定提示信息的样式

validation-advice-prompt, validation-advice-passed, validation-advice-failed 分别指定输入域 获取焦点，验证通过，验证失败时，提示信息的样式

5. 更复杂的验证

下面我们为: 邮箱地址， 出生日期， 真实姓名， 手机号添加验证

真实姓名，我们要求2~4个汉字（尽管不是很合理（现在的baby的姓名越来越怪），但这里只是例子）

view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text<STRONG> validate-chinese validate-length-range-2-4</STRONG>" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text <STRONG>validate-mobilephone</STRONG>" title="请正确输入您的手机号吗" /></p>
...
</form>

<form action="" method="post" class="required-validate">
...
<p>邮箱地址： <input type="text" name="email" class="input-text required validate-email" title="请输入Email地址" failedmessage="请输入Email地址;Email地址格式不正确，请重新输入" /></p>
<p>出生日期：<input type="text" name="birthday" class="input-text validate-date-y-m-d" title="请正确输入出生日期(例1983-6-15)" /></p>
...
<p>真实姓名： <input type="text" name="truename" class="input-text validate-chinese validate-length-range-2-4" failedmessage="请正确输入您的真实姓名(2-4个中文汉字)" /></p>
<p>手机号： <input type="text" name="mobilephone" class="input-text validate-mobilephone" title="请正确输入您的手机号吗" /></p>
...
</form>看看效果1. 可以在class属性中指定多个验证器。
2. 除required外，指定其它验证器时需要带前缀 validate-。
3. 可以指定验证器参数，见上例。
4. 框架默认会优先从failedmessage属性中取得错误提示信息，然后是title。
5. 如果对一个输入域指定了多个验证器，并且需要对每个验证器有不同的提示信息，默认采用分号";"分隔。
5. 框架默认会从输入域的： promptmessage, passedmessage, failedmessage分别取得 获取焦点，验证通过，验证失败 的提示信息
重复密码应该和登录密码录入一致，性别中应该二选一

view plaincopy to clipboardprint?
<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>

<form action="" method="post" class="required-validate">
...
<p>登录密码：<input id="userpassword" type="text" name="password" class="input-text required" title="请输入密码" /></p>
<p>重复密码：<input type="text" name="confirm-password" class="input-text validate-equals-userpassword" title="请再次输入密码"failedmessage="两次密码录入不一致，请重新输入" /></p>
...
<p>性别： <input id="sexboy" name="sex" type="radio" value="1" class="validate-required-any-sexgirl" failedmessage="请选择性别" /><label for="sexboy">男</label> <input id="sexgirl" name="sex" type="radio" value="0" /><label for="sexgirl">女</label></p>
...
</form>
看看效果
很容易吧，我们没有写任何JS，就完成了对以上注册表单的验证。

我们使用过的内置验证器(validator)有： required, equals, email, date, required-any, chinese, length-range, mobilephone 当然可以看看内置验证器，以了解更多

如果您不喜欢上述HTML验证的方式 ，或者更愿意写JS（像我一样），或者有特别的验证需求， 完全可以 使用js对表单进行验证。

如果内置验证器不满足需求，可以添加自己的验证器。

如果默认的提示方式(Advice)不满足要求，可以定制自己的Advice。
xfyjg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 验证密码格式
Z_ammo的博客
12-06 1859
先写一个比较全的示例，要求密码包括大小写字母，数字和特殊字符，允许有空格，8位以上： let password = 'ABCabc123 %&*'; let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).{8,}$/; console.log(reg.test(password)); // true ...
JS验证
03-01
Validator.chm文件是一个Windows帮助文档，可能包含了关于JavaScript验证的详细指南或API参考。通常，CHM文件是由多个HTML页面组成，可以方便地搜索和查看特定主题。这个文件可能涵盖了各种验证方法、函数、类或者...
JavaScript 验证 API
smarten57的博客
05-27 1475
3. **第三方验证库（Third-party Validation Libraries）**：除了使用原生JavaScript验证API，你还可以使用第三方的验证库来简化验证操作。2. **表单验证（Form Validation）**：对于表单验证，JavaScript提供了一些内置的方法和属性来访问表单元素以及验证其值。1. **正则表达式（Regular Expressions）**：正则表达式是一种强大的验证工具，用于匹配和验证字符串。根据你的具体需求，你可以选择适合的方法来验证用户输入的数据。
js验证表单用户名，密码
木子李
09-24 2941
当表单用户名、密码等各项内容符合格式时，表单提交成功，否则表单验证不通过，提交失败。废话不多说，上码，效果图最后。
js验证复杂密码
weixin_45966674的博客
07-26 713
本方法验证用户密码必须包含一个或一个以上大小字母一个或一个以上大写字母一个或一个以上数字且不能少于8位。这里放弃了特殊符号的校验因为我们开发的系统大部分密码中不支持有特殊符号会导致后端不好加密解析。...
JS验证姓名
weixin_44584059的博客
09-30 2907
JS验证姓名HTMLCSSJS HTML <!-- 验证表单姓名是否正确S --> <div class="phone_container"> <h1>验证表单中姓名是否正确</h1> <label for="">姓名</label><input type="text" name="" id="inp1" /> <em id="judge2"></em>
JS 验证税号
weixin_39501680的博客
03-10 1411
/** * 验证税号 * 15或者17或者18或者20位字母、数字组成 */ checkTax(obj) { if (/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(obj)) { return true; } },
js验证车牌号
wgh0315的博客
04-20 1630
/** * 车牌号验证（后半部分不能出现I和O，避免与0和1混淆） * @param vehicleNumber * @returns {*} */ export function isVehicleNumber(vehicleNumber) { var xxreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DABCEFGHJK]$)|([DABCEFGHJK][A-HJ-NP-Z0-9][0-9]{4}$))/;
JavaScript验证邮箱格式是否正确
weixin_45966674的博客
03-20 4008
//验证邮箱 function checkEmail(value) { return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(value) }
javascript表单验证
lijie1025的博客
03-16 1902
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
绕开JS验证的方法汇总
william_n的博客
04-05 6501
1.应用场景 用于请求接口测试.[比如后端接口安全测试] 2.学习/操作 前言: 服务器端验证是必要的. 方法汇总 方法一 将页面保存到自己机器上, 然后把脚本检查的地方去掉,最后在自己机器上运行那个页面即可. 测试结果: TBD 方法二 ...
javascript验证
04-13
JavaScript验证是Web开发中不可或缺的一环，主要用于前端数据的校验和用户输入的合法性检查，以确保用户提交的信息准确无误。这篇博文链接虽然没有提供具体的内容，但我们可以通过标题和标签来推测其可能涉及的知识...
js验证错误信息.rar
06-17
在JavaScript（JS）中，验证错误信息是网页前端开发中不可或缺的部分。这通常涉及到用户输入数据的检查，确保数据的有效性和安全性。"js验证错误信息.rar" 包含的资源显然是一个封装了验证功能的JS类，适用于文本框...
常见JS验证脚本汇总
10-23
本文将详细介绍常见的JS验证脚本，这些脚本包括系统内置函数和自定义函数，对于理解和实现JavaScript验证功能具有很高的参考价值。 首先，我们来看一些基础的字符串处理函数： 1. `trim()`, `lTrim()`, `rTrim()`...
js javaScript 验证校验小工具包
02-25
这个"js javaScript 验证校验小工具包"显然是一个集合了各种JavaScript验证和校验功能的资源库，旨在帮助开发者更方便地处理表单验证、数据格式检查等常见任务。 在前端开发中，验证和校验通常涉及以下几个方面： ...
jiaoyanguizeduibi
07-10
jiaoyanguizeduibi
戴师兄数据分析启蒙课_Tableau练习.twbx
07-10
戴师兄数据分析启蒙课_Tableau练习.twbx
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
07-09
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
理工科考研自动控制知识点大全
最新发布
07-10
理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全
javaweb中js验证
03-21
3. 内置验证函数：JavaScript提供了一些内置的验证函数，如`isNaN()`用于判断是否为数字，`parseInt()`用于将字符串转换为整数等。 4. 第三方插件：可以使用一些第三方的JS插件来实现更复杂的验证需求，如jQuery ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值