定制开发小程序JavaScript之表单验证

 前言：定制开发小程序我们这一次讲的运用了定制开发小程序前面几篇文章说讲的的内容，定制开发小程序比之前的要难一些，定制开发小程序我会在代码里以注释的定制开发小程序形式详细的讲解。

目录

一.定制开发小程序简单的表单验证

 

定制开发小程序验证方式一:

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         span {
  7.             color: red;
  8.             font-weight: bold;//字体粗细
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <form action="" id="myForm">
  14.      //onkey(键)，onkeyup定制开发小程序当键被点击
  15.     <p>名字: <input type="text" id="userName" onkeyup="checkName(this)"><span id="l1"></span></p>
  16.     <p>密码: <input type="text" id="userPwd" onkeyup="checkPwd(this)"><span id="l2"></span></p>
  17.     <p>邮箱: <input type="text" id="userEmail" onkeyup="checkEmail(this)"><span id="l3"></span></p>
  18.     <p>
  19.         <button>登录</button>
  20.     </p>
  21. </form>
  22. <script>
  23.  
  24.  
  25.     //用来检查名字是否合规
  26.     function checkName() {
  27.         /*定义一个值拿到姓名输入框值的长度*/
  28.         var length = userName.value.length
  29.         if (length > 0) {//里面有内容
  30.             //名字的大小应该在 3-6 之间（定义值的长度）
  31.             if (length >= 3 && length <= 6) {
  32.                 l1.textContent = "😊"
  33.                 return true
  34.             }
  35.             //不在区间之内
  36.             l1.textContent = "长度必须在3-6之间"
  37.             //必须return一个值，否则会被覆盖，return有中断的作用
  38.             return false
  39.         }
  40.         //里面没有内容
  41.         l1.textContent = "长度必须大于0"
  42.         return false
  43.     }
  44.  
  45.     //用来检查密码是否合规
  46.     function checkPwd() {
  47.         var length = userPwd.value.length
  48.         if (length > 0) {//里面有内容
  49.             //名字的大小应该在 3-6 之间
  50.             if (length >= 3 && length <= 6) {
  51.                 l2.textContent = "😊"
  52.                 return true
  53.             }
  54.             //不在区间之内
  55.             l2.textContent = "长度必须在3-6之间"
  56.             return false
  57.         }
  58.         //里面没有内容
  59.         l2.textContent = "长度必须大于0"
  60.         return false
  61.     }
  62.  
  63.     //用来检查邮箱是否合规
  64.     function checkEmail() {
  65.         var length = userEmail.value.length
  66.         if (length > 0) {//里面有内容
  67.             //名字的大小应该在 3-6 之间
  68.             if (length >= 3 && length <= 6) {
  69.                 l3.textContent = "😊"
  70.                 return true
  71.             }
  72.             //不在区间之内
  73.             l3.textContent = "长度必须在3-6之间"
  74.             return false
  75.         }
  76.         //里面没有内容
  77.         l3.textContent = "长度必须大于0"
  78.         return false
  79.     }
  80.  
  81.     //添加提交事件(会具备返回值)
  82.     myForm.onsubmit = () => {
  83.         //阻止表单的提交  需要返回 false
  84.         //有两种方法
  85.         //第一种：return checkName()&&checkPwd()&&checkEmail()
  86.         //第二种：
  87.         var f1 = checkName()
  88.         var f2 = checkPwd()
  89.         var f3 = checkEmail()
  90.         return f1 && f2 && f3
  91.     }
  92. </script>
  93. </body>
  94. </html>

 验证方式二：

 这是上面代码的优化

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         span {
  7.             color: red;
  8.             font-weight: bold;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <form action="" id="myForm">
  14.     <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
  15.     <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
  16.     <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
  17.     <p>
  18.         <button>登录</button>
  19.     </p>
  20. </form>
  21. <script>
  22.  
  23.     //用来检查是否合规
  24.     function checkLabel(obj) {
  25.         var length = obj.value.length
  26.         //input标签和span标签都在p标签里，它们是兄弟关系，可以获得下一个相邻元素
  27.         // var label=obj.nextElementSibling
  28.         //在span标签里加一个i标签，可以获得i标签父级元素相邻的上一个元素
  29.         var label = obj.parentElement.getElementsByClassName("error")[0]
  30.         if (length > 0) {//里面有内容
  31.             //名字的大小应该在 3-6 之间
  32.             if (length >= 3 && length <= 6) {
  33.                 label.textContent = "😊"
  34.                 return true
  35.             }
  36.             //不在区间之内
  37.             label.textContent = "长度必须在3-6之间"
  38.             return false
  39.         }
  40.         //里面没有内容
  41.         label.textContent = "长度必须大于0"
  42.         return false
  43.     }
  44.  
  45.    
  46.     //添加提交事件(会具备返回值)
  47.     myForm.onsubmit = () => {
  48.         //阻止表单的提交  需要返回 false
  49.         // return checkName()&&checkPwd()&&checkEmail()
  50.         var f1 = checkLabel(userName)
  51.         var f2 = checkLabel(userEmail)
  52.         var f3 = checkLabel(userPwd)
  53.         return f1 && f2 && f3
  54.     }
  55. </script>
  56. </body>
  57. </html>

 运行结果：

 

 

 

 二.正则验证

我相信各位小伙伴们应该都知道正则表达式，但我还是要讲一下， 正则表达式又称规则表达式，它是对字符串操作的一种逻辑公式，即用事先定义好的一些特定字符以及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
正则表达式可以用来做什么?
    给定一个正则表达式和另一个字符串，我们可以达到如下的目的：
    1. 检查给定的字符串是否符合正则表达式的过滤逻辑，即能否匹配；
    2. 可以通过正则表达式的匹配，从字符串中提取或替换特定的部分。

一.正则的规则

                                                                  内容

\d数字[0-9]
\D非数字^[0-9]
\w数字+英文+下划线[0-9a-zA-Z_]
\W非数字+英文+下划线^[0-9a-zA-Z_]
.任意字符

                                                                 次数 

？0~1次
+至少一次
*0~任意次
\d{5}五个数字（数字任意填）
\d{5,10}至少五次，最多10次（数字任意填

 二.正则的注意事项

必须以/^开头
必须以$/结尾
不要把\写成\\
定义正则对象(例如)： var  rex=/^\d{5}$/

使用正则对象(例如)： rex.test('123')

接下来我们用正则来写一个简单验证

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         span {
  7.             color: red;
  8.             font-weight: bold;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <form action="" id="myForm">
  14.     <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
  15.     <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
  16.     <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
  17.     <p>
  18.         <button>登录</button>
  19.     </p>
  20. </form>
  21. <script>
  22.  
  23.     //用来检查是否合规
  24.     //括号里是传入的值
  25.     function checkLabel(obj,rex,tip) {
  26.         var length = obj.value.length
  27.         var label = obj.parentElement.getElementsByClassName("error")[0]
  28.         if (length > 0) {//里面有内容
  29.             //内容在正则匹配之间
  30.             if (rex.test(obj.value)) {
  31.                 label.textContent = "😊"
  32.                 return true
  33.             }
  34.             //不在区间之内
  35.             label.textContent = tip
  36.             return false
  37.         }
  38.         //里面没有内容
  39.         label.textContent = "长度必须大于0"
  40.         return false
  41.     }
  42.  
  43.     //添加提交事件(会具备返回值)
  44.     myForm.onsubmit = () => {
  45.         //阻止表单的提交  需要返回 false
  46.         // return checkName()&&checkPwd()&&checkEmail()
  47.         var f1 = checkLabel(userName)
  48.         var f2 = checkLabel(userEmail)
  49.         var f3 = checkLabel(userPwd)
  50.         return f1 && f2 && f3
  51.     }
  52. </script>
  53. </body>
  54. </html>

三.二级联动

二级联动这个词听起来是不是很高级，但是它其实在我们的生活中很常见，下面这个代码你们一看就知道它是什么了o(TヘTo)

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7. //select 下拉框，provinces 省份，onchange 改变事件
  8. <select id="province" onchange="myChange()"></select>
  9. <select id="cities"></select>
  10.  
  11. <script>
  12.  
  13.     //JS数组的特点
  14.     //类型不限制
  15.     //长度不限制
  16.     //数组可以是字符串
  17.     var provinces=[]
  18.     //城市
  19.     provinces["湖南省"]=["长沙","怀化","岳阳"]
  20.     provinces["广西省"]=["桂林","梧州","来宾"]
  21.     provinces["浙江省"]=["杭州","宁波","舟山"]
  22.  
  23.     //省份怎么来
  24.     //  for of 相当于foreach 遍历元素
  25.     //  for in 遍历下标
  26.     for(let i in provinces){
  27.         //往省份的下拉框中添加选项
  28.         //appendChild 追加子节点
  29.         //<option value="i">i</option>
  30.         //第一个i是value的值，第二个i是显示的值
  31.         province.appendChild(new Option(i,i))
  32.     }
  33.  
  34.     //城市里面放值
  35.     function setCity(name) {
  36.         for(let i of provinces[name]){
  37.             cities.appendChild(new Option(i,i))
  38.         }
  39.     }
  40.  
  41.     setCity(province.value)
  42.  
  43.     function myChange() {
  44.         //清空原来的选项
  45.         cities.innerHTML=""
  46.         //输入框和下拉框可以拿到value
  47.         setCity(province.value)
  48.     }
  49. </script>
  50. </body>
  51. </html>

运行结果：

 

 好了，这篇文章到处结束了，期待我们下一篇文章相见(￣▽￣)"

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发