表单验证

最新推荐文章于 2024-08-02 00:06:19 发布
最新推荐文章于 2024-08-02 00:06:19 发布
阅读量391 收藏
点赞数 1
分类专栏： 前端 代码 文章标签： 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37889253/article/details/70169859
版权

表单验证

<!DOCTYPEhtml>

<html>

 <head>

       <meta charset="utf-8">

       <title>文档的标题</title>

       <script>

       function getvalue(){

       varvalue=document.getElementById("range").value;//document所有文本.getElementById获取所有id

        varage=document.getElementById("age");

        age.innerText=value;//innerText赋值文本框

       }

       function checkName(){

       varuserName=document.getElementById("userName");

       varr=document.getElementById("r");

       var flag=userName.checkValidity();//文本的核对是否符合正则表达式（但不会判断不为空的状态）

       if(userName.value.length==0){r.innerText="用户名不能为空"}

       else{

       if(flag)r.innerText="用户名格式正确";

       else r.innerText="用户名格式不正确";

              }

       }

       function checkPSW(){

       varpsw=document.getElementById("psw").value.length;

       var r2=document.getElementById("r2");

       if(psw<3){r2.innerText="弱";}

       else if(psw>=3 &&psw<6){r2.innerText="中";}

       else {r2.innerText="强";}

       }

       function checkPSWsame(){

       varpsw=document.getElementById("psw").value;

       varpw2=document.getElementById("pw2").value;//文本一致：if判断两个文本的值是否==

       varr3=document.getElementById("r3");

       if(psw==pw2){r3.innerText="密码一致";}

       else{r3.innerText="密码不一致";}

       }

       </script>

</head>

<body>

<formaction="ok.html" method="post" id="myform"novalidate="true"><!--取消表单验证-->

<tableborder="1">

       <tr>

       <td>用户名</td>

       <td><input type="text"autofocus="autofocus" placeholder="请输入用户名" pattern="^[A-z0-9]{4,}$"οnblur="checkName()" id="userName">

       <spanid="r"></span>

       <br>

       <!--autofocus自动获取焦点required控制不为空placeholder占用符pattern（一个正则表达式中括号）-->

       <span style="color:red;font-size:12px">必须是英文或数字且用户名不少于4位</span></td>

       </tr>

      

       <tr>

       <td>密码</td>

       <td><inputtype="password" placeholder="请输入密码" οnkeyup="checkPSW()"id="psw">

       <spanid="r2"></span></td>

       </tr>

      

       <tr>

       <td>确认密码</td>

       <td><inputtype="password" placeholder="请输入确认密码" οnblur="checkPSWsame()" id="pw2">

       <spanid="r3"></span></td>

       </tr>

      

       <tr>

       <td>出生年月日</td>

       <td><inputtype="date"></td>

       </tr>

      

       <tr>

       <td>年龄：</td>

       <td><inputtype="range" max="100" min="0"οnchange="getvalue()" id="range">

       <spanid="age"></span></td>

       </tr><!--最大值最小值，改变属性（使用funtion方法），id-->

      

       <tr>

       <td>性别：</td>

       <td><inputtype="radio">男

       <input type="radio">女</td>

       </tr>

      

       <tr>

       <td>收入：</td>

       <td><inputtype="number"></td>

       </tr>

      

       <tr>

       <td>邮箱：</td>

       <td>       <input type="email" placeholder="请输入邮箱"required="required"></td>

       </tr>

      

       <tr>

       <td>个人网站：</td>

       <td>

       <input type="url">

       </td>

       </tr>

      

       <tr>

       <td>城市：</td>

       <td>

              <select>

              <option>北京</option>

              <option>上海</option>

              <optionselected="selected">广州</option>

              <option>合肥</option>

              <option>深圳</option>

              <option>厦门</option>

              <option>桂林</option>

              </select>

       </td>

       </tr>

      

       <tr>

       <td>城市中的地区：</td>

       <td><select>

       <optgroup label="广东省">

              <option>广州</option>

              <option>茂名</option>

              <option>湛江</option>

              <option>深圳</option>

       </optgroup>

       <optgroup label="广西省">

              <option>桂林</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

       <optgroup label="湖南省">

              <option>长沙</option>

              <option></option>

              <option></option>

              <option></option>

       </optgroup>

 

       </select>

       </td>

       </tr>

      

       <tr>

       <td>交友目的：</td>

       <td><selectsize="4">

       <option>校友</option>

       <option>同学</option>

       <option>爱人</option>

       <option>同行</option>

       <option>亲戚</option>

       <option>网友</option>

       <option>其他</option>

       </select>

       </td>

       </tr>

      

       <tr>

       <td>爱好：</td>

       <td><input type="checkbox">美术

       <input type="checkbox">音乐

       <input type="checkbox">篮球

       <input type="checkbox">逛街</td>

       </tr>

      

       <tr>

       <td>照片上传：</td>

       <td><inputtype="file"></td>

       </tr>

      

       <tr>

       <td>自我介绍：</td>

       <td><textarea rows="5"cols="40"></textarea>

       </td>

       </tr>

      

       <tr>

       <td colspan="2"><inputtype="submit" value="提交">

       <input type="reset"value="取消"></td>

       </tr>

      

</table>

      

</form>

</body>

 

 </html>


我是吴明湖
关注
专栏目录
Spring Boot 表单验证
weixin_44976692的博客
07-21 1万+
表单验证是指在用户提交表单数据之前，对数据进行检查，确保其符合预期的格式和规则。例如，检查邮箱地址是否有效、密码是否符合长度要求、必填字段是否为空等。通过表单验证，可以提高数据的质量，增强应用程序的安全性。有时候，内置的验证注解不能满足我们的需求，我们可以创建自定义验证器。例如，我们可以创建一个自定义验证器，验证用户名是否已被使用。String message() default "用户名已被使用";Class
22 JavaScript学习：表单验证
热门推荐
百锦再的博客
04-30 9万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
PHP表单验证
x-2010的笔记
07-03 4568
这里将介绍如何使用PHP验证客户端提交的表单数据。在处理PHP表单时需要考虑安全性，这里将展示PHP表单数据安全处理，为防止黑客以及垃圾信息就需要对表单进行数据安全验证，实例介绍的HTML表单中包含以下输入字段：必须与可选文本字段，单选按钮，及提交按钮：form_verify.php:&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &l...
javascript表单验证
lijie1025的博客
03-16 1986
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
15 php学习：表单验证
百锦再的博客
04-16 6万+
因此，在密码验证规则中，需要综合考虑密码的长度要求、复杂性要求、确认验证、安全策略等方面的内容，以确保密码的安全性和用户友好性。通过有效的唯一性检查方法，可以确保系统数据的准确性和完整性，避免重复数据的存在，提高系统的性能和安全性。通过日期验证，可以确保用户输入的日期符合指定的格式和范围要求，从而提高数据的准确性和系统的安全性。表单验证在网页和应用程序开发中起着至关重要的作用，其主要目的是确保用户输入的数据符合预期的格式和规则，以提升用户体验、数据准确性和系统安全性。
angular表单验证
yanyi24的博客
04-08 4037
表单验证 通常，我们都需要对用户的表单输入做验证，以保证数据的整体质量。 Angular也有两种验证表单的形式： 使用属性验证，用于模板驱动表单； 使用验证器函数进行验证，用于响应式表单。 验证器（Validator）函数 验证器函数可以是同步函数，也可以是异步函数。 同步验证器：接受控件实例，然后返回验证错误信息或 null。在实例化一个 FormControl时把它作为构造函数的第二个参数传进去； 异步验证器 ：接受实例并返回一个 Promise或 Observable，稍后会发出一组验证错误或
jQuery实现表单验证
生有涯，知无涯
04-24 4万+
1.基于html表单，利用jQuery实现表单验证功能。 2.html基本结构和样式： 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h...
vant表单验证
weixin_37863088的博客
11-15 2085
vant表单验证validator: (value) =>{true or false}
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
Element Plus 表单验证详解
繁依Fanyi的博客
08-02 1746
有时内置的验证规则可能无法满足需求，这时可以使用自定义验证器。rulevalue，和callback。if (!value) {return callback(new Error('请输入用户名'))// 模拟异步验证callback(new Error('用户名已被占用'))} else {callback()}, 1000)Element Plus 提供了强大且灵活的表单验证功能，能够满足各种复杂的表单验证需求。通过使用内置的验证规则和自定义验证器，可以实现对表单项的精确控制。
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
JavaScript实现仿网易通行证表单验证
10-24
下面，我将从这几个方面详细介绍表单验证的具体实现方法和知识点。 首先，表单验证通常指的是在用户填写完信息并提交之前，通过编写脚本或使用HTML5的内建验证属性来检查用户输入的数据是否符合要求的过程。这样做...
浅谈关于iview表单验证的问题
10-17
iview中的表单验证是其组件库中不可或缺的一部分，尤其在处理数据提交前的合法性校验中扮演了重要角色。本文主要围绕iview表单验证过程中可能出现的问题进行探讨，并提供了一些解决方案。 首先，表单验证步骤的准确...
基于微信小程序的在线办公小程序答辩PPT.pptx
最新发布
11-04
基于微信小程序的在线办公小程序答辩PPT.pptx
机器学习（预测模型）：2000年至2015年期间193个国家的预期寿命和相关健康因素的数据
11-04
这个数据集来自世界卫生组织（WHO），包含了2000年至2015年期间193个国家的预期寿命和相关健康因素的数据。它提供了一个全面的视角，用于分析影响全球人口预期寿命的多种因素。数据集涵盖了从婴儿死亡率、GDP、BMI到免疫接种覆盖率等多个维度，为研究者提供了丰富的信息来探索和预测预期寿命。 该数据集的特点在于其跨国家的比较性，使得研究者能够识别出不同国家之间预期寿命的差异，并分析这些差异背后的原因。数据集包含22个特征列和2938行数据，涉及的变量被分为几个大类：免疫相关因素、死亡因素、经济因素和社会因素。这些数据不仅有助于了解全球健康趋势，还可以辅助制定公共卫生政策和社会福利计划。 数据集的处理包括对缺失值的处理、数据类型转换以及去重等步骤，以确保数据的准确性和可靠性。研究者可以使用这个数据集来探索如教育、健康习惯、生活方式等因素如何影响人们的寿命，以及不同国家的经济发展水平如何与预期寿命相关联。此外，数据集还可以用于预测模型的构建，通过回归分析等统计方法来预测预期寿命。 总的来说，这个数据集是研究全球健康和预期寿命变化的宝贵资源，它不仅提供了历史数据，还为未来的研究和政策制
基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx
11-04
基于微信小程序的“健康早知道”微信小程序答辩PPT.pptx
基于微信小程序的电影交流平台答辩PPT.pptx
11-04
基于微信小程序的电影交流平台答辩PPT.pptx
JS表单验证实例集合
"JS 表单验证大全是一个全面收集了JavaScript进行表单验证的各种方法的集合，适合开发者在处理用户输入时参考使用。" 在网页开发中，表单验证是必不可少的一部分，它确保用户提交的数据符合预期的格式，从而防止...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值