20个原生jsdemo:1 form-validator

时间:2021-09-15
本文章向大家介绍20个原生jsdemo:1 form-validator,主要包括20个原生jsdemo:1 form-validator使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

HTML

四个input用来输入信息。当输入信息不符合规则/成功时利用js改变css提示给用户。

主要元素

  • form
  • username
  • email
  • password
  • password2

CSS

主要通过改变样式"form-control"是"error"还是"success"来控制html元素。

JS

function

 1 /**
 2  *
 3  * @param {HTMLElement} input
 4  * @param {String} message
 5  */
 6 function showError(input, message)
 7 /**
 8  *
 9  * @param {HTMLElement} input
10  */
11 function showSuccess(input)
12 /**
13  *
14  * @param {HTMLElement} input
15  */
16 function checkEmail(input)
17 /**
18  *
19  * @param {Array} inputArr
20  */

  
  function checkRequired(inputArr)
21 /**
22  *
23  * @param {HTMLElement} input
24  * @param {Number} min
25  * @param {Number} max
26  */
27 function checkLenght(input, min, max)
28 function checkPasswordsMatch(input1, input2)
29 /**
30  *
31  * @param {HTMLElement} input
32  */
33 function getFieldName(input)

主要逻辑

1. 首先是显示成功和失败。通过传入元素定位其父元素的class即form-control,根据成功和失败来改变其样式。

2. 其次是检查输入是否为空。根据传入的HTMLElementArray来确定是否存在未输入的内容,只有全部输入都存在时才会进一步判断。

3. 当所有内容不为空时对内容的长度,email的合法以及两次密码是否相同进行判断。

原文地址:https://www.cnblogs.com/yukinon/p/15272708.html