正则表达式的两种使用方式及其用法上的区别
表单提交的两种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
function checkUname(node) {
var flag = false;
if(node==undefined) {
node = document.getElementById("uname");
}
var uname = node.value;
var unameSpan = document.getElementById('unameSpan');
//限定只能为字母，不区分大小写，长度4位
var reg = /^[a-z]{4}$/i;
//var reg = new RegExp("^[a-z]{4}$","i");//匹配模式 i 忽略大小写
//正则表达式的2中定义方式
//var reg = /^\d{4}$/i;//不需要对\d转义
//var reg = new RegExp("^\\d{4}$","i");//由于在字符串中定义正则，所以需要对\d进行转义，这就是两种定义方式的区别
if(reg.test(uname)) {
flag = true;
unameSpan.innerHTML = "<b>ok</b>".fontcolor("green");
//unameSpan.innerHTML = "<img src='ok.jpg' alt='ok'/>";
}else {
unameSpan.innerHTML = "<b>用户名不符合要求</b>".fontcolor("red");
}
return flag;
}
//控制form表单的提交
function checkForm() {
return checkUname();
}
//另一种表单提交方式:
//通过form表单的submit方法进行提交（更灵活，可以通过外部的各种事件来完成 ，如按钮被点击，超链接/图片被点击 ，等等 ）
function mySubmit() {
if(!checkForm())
return;
var fm = document.getElementById("form_1");
fm.submit();
}
</script>
</head>
<body>
<div>
<form id="form_1" onsubmit="return checkForm();">
<table>
<tbody>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="uname" id="uname" onblur="checkUname(this);"/>
<span id="unameSpan"></span>
</td>
</tr>
<tr>
<td>
输入密码
</td>
<td>
<input type="password" name="pwd" id="pwd" onblur="checkPwd(this);"/>
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repwd" id="repwd" onblur="checkRepwd(this);"/>
<span id="repwdSpan"></span>
</td>
</tr>
<tr>
<td>
邮件地址
</td>
<td>
<input type="text" name="email" id="email" onblur="checkEmail(this);"/>
<span id="emailSpan"></span>
</td>
</tr>
<tr>
<td>
<!-- submit具有默认的提交效果 -->
<input type="submit" value="提交"/>
</td>
</tr>
</tbody>
</table>
</form>
<hr/>
<input type="button" value="另一种提交方式 " onclick="mySubmit();"/>
</div>
</body>
</html>
复用校验逻辑，减少冗余代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
/*校验用户名*/
function checkUname() {
var reg = /^[a-z]{4}$/i;
return check(reg,"uname","unameSpan", "用户名正确".fontcolor("green"), "用户名错误".fontcolor("red"));
}
/*校验密码*/
function checkPwd() {
var reg = /^\d{6}$/i;
return check(reg,"pwd","pwdSpan","密码格式正确".fontcolor("green"),"密码格式错误".fontcolor("red"));
}
/*校验2次密码是否一致*/
function checkRepwd() {
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
var spanRepwd = document.getElementById("repwdSpan");
if(pwd==repwd) {
spanRepwd.innerHTML = "两次密码一致".fontcolor("green");
} else {
spanRepwd.innerHTML = "两次密码不一致".fontcolor("red");
}
return pwd==repwd;
}
/*校验邮箱格式*/
function checkEmail() {
var reg = /^\w+@\w+(\.\w+)+$/i;
return check(reg,"email","emailSpan","邮件格式正确".fontcolor("green"),"邮件格式错误".fontcolor("red"));
}
//复用校验逻辑！！！
function check(reg,nodeId,spanId,okInfo,errorInfo) {
var flag;
var val = document.getElementById(nodeId).value;
var unameSpan = document.getElementById(spanId);
if(reg.test(val)) {
flag = true;
unameSpan.innerHTML = okInfo;
}else {
flag = false;
unameSpan.innerHTML = errorInfo;
}
return flag;
}
//控制form表单的提交
function checkForm() {
//alert(checkUname() +","+ checkPwd() +","+ checkRepwd() +","+ checkEmail());
//最后进行提交的时候，再次调用每个方法，确保都为true的情况下提交表单数据
return checkUname() && checkPwd() && checkRepwd() && checkEmail();
}
</script>
</head>
<body>
<div>
<form id="form_1" onsubmit="return checkForm();">
<table>
<tbody>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="uname" id="uname" onblur="checkUname();"/>
<span id="unameSpan"></span>
</td>
</tr>
<tr>
<td>
输入密码
</td>
<td>
<input type="password" name="pwd" id="pwd" onblur="checkPwd();"/>
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repwd" id="repwd" onblur="checkRepwd();"/>
<span id="repwdSpan"></span>
</td>
</tr>
<tr>
<td>
邮件地址
</td>
<td>
<input type="text" name="email" id="email" onblur="checkEmail();"/>
<span id="emailSpan"></span>
</td>
</tr>
<tr>
<td>
<!-- submit具有默认的提交效果 -->
<input type="submit" value="提交"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
相关推荐
**jQuery的form表单校验插件** 在Web开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预设的规则，避免无效数据的提交，提高用户体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能，包括对DOM...
### Vue之ElementUI Form表单校验 #### 表单校验的重要性 在前端开发过程中，表单校验是一项至关重要的功能。它不仅能够确保用户输入的数据格式正确、符合预期，还能提高用户体验，减少服务器端的压力。ElementUI...
原生JavaScript的表单校验则是为了确保用户输入的数据符合预期格式和规则，提高用户体验，防止无效或恶意数据的提交。这个经典小项目旨在通过JavaScript实现对HTML表单的验证，无需依赖外部库如jQuery或其他前端框架...
你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select...
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
本资源通过ajax实现对提交的form表单的验证，该代码不但有针对property验证，也有针对object验证，还有一个异步获取对象的实例；包含完整的代码和库文件；在myeclipse8.5和apache-tomcat-6.0.30测试通过；访问网址：...
6. **触发验证**：在提交表单或事件触发时，调用`$("#formId").valid()`进行验证。 **三、示例代码** ```javascript $(document).ready(function() { $.validate({ modules: 'security', // 引入安全相关的验证...
el-form表单组件，用于包裹表单域；el-form-item表单项组件，用于渲染具体的输入框。需要注意的是，表单项中的prop属性用于指定当前表单项的数据绑定和校验规则。由于是数组的每一项，所以在prop中使用了模板字符串...
在进行Web应用程序开发时，表单验证是一项非常重要的功能，它可以确保用户输入的数据格式正确并符合预期的要求。其中，身份证号码验证尤其重要，因为它涉及到个人信息的真实性和合法性。本文将详细介绍如何使用...
在网页开发中，表单验证是一项关键任务，它确保用户输入的数据符合预设的规则，以保持数据的准确性和安全性。本主题主要关注的是“表单的验证数字字符特殊符号”，这涉及到对用户在表单中输入的数字、字母以及特殊...
使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486
Vue-form 是 Vue.js 社区中用于处理表单的库，它提供了一种便捷的方式来管理表单状态、验证和提交。在这个实例中，我们将深入探讨如何使用 Vue-form 来验证表单字段是否为空值。 首先，我们需要创建一个表单。在 ...
在网页开发中，表单（Form）验证是一个关键环节，用于确保用户输入的数据符合预设的规则和标准，从而防止无效数据的提交，提高用户体验，同时也保护了服务器资源免受恶意攻击。`Form验证表单`是这个过程的核心，本文...
在进行前端表单设计和开发时，经常需要对表单的校验状态进行管理。特别是在具有动态表单功能的应用...对于使用iview框架的前端开发者来说，这些知识点非常有价值，有助于在开发过程中更加灵活地处理表单校验相关问题。
在网页设计和开发中，`form` 表单是用户与服务器进行数据交互的重要组成部分，而日期输入控件则是表单中常见的一种元素，用于收集用户的日期或时间信息。在HTML5中，引入了内置的日期输入类型，使得创建和处理日期...
微信小程序中的`<form>`表单组件为开发者提供了便捷的数据收集和处理方式，结合数据绑定、事件监听、数据校验以及文件上传等功能，可以构建出丰富的用户交互体验。通过理解和熟练运用这些知识点，开发者能够更好地...
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没有多大的问题，但是在实际工作中，表单校验有可能有比较复杂的...
Vue 3的表单验证 用于表单验证的Vue合成功能。 :milky_way: 用TypeScript编写 :water_wave: 动态表格支持 :fallen_leaf: 轻的 npm install vue3-form-validation 验证是异步的，并且正在使用Promise.allSettled...