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的合法以及两次密码是否相同进行判断。

posted @ 2021-09-15 16:17  雪之下。  阅读(86)  评论(0)    收藏  举报