Veröffentlicht am

How to validate form by your own js

前言
“input”如何实时验证其输入值是否合格，这么想：

  • 第一步，点击进去要写点什么
  • 第二步，算了不写了
  • 第三步，移出
  • 第四步，刚移出，hi,提示错误了
    如何做呢，移出是什么呢，onblur!!!失去焦点。
    其实除此之外还有：
    1.onclick
    1
    <input onclick="fn(event)">

keydown、keypress 事件无法获取刚输入的内容，而 keyup 又貌似控制晚了：总是看到字符被输入又再被删除

2.oninput/onpropertychange监听输入框内容的变化

1
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

关于js如何控制
如下：

1
2
3
4
5
6
7
8
9
10
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
    function OnInput (event) {
        alert ("The new content: " + event.target.value);
    }
// Internet Explorer
    function OnPropChanged (event) {
        if (event.propertyName.toLowerCase () == "value") {
            alert ("The new content: " + event.srcElement.value);
        }
    }

3.onkeyup事件监听，当达到一定长度时再执行某动作

1
2
3
4
5
6
7
8
9
<input type="text" id="myText">
<script type="text/javascript">
    var element=document.getElementById('myText');
    element.onkeyup=function(){
        if(element.value.length>=10){
            console.log(element.value);
        }
    }
</script>

4.onkeypress/onkeydown接收回车事件

1
2
3
4
5
6
7
8
9
<input type="text" onkeypress="EnterPress(event)" onkeydown="EnterPress()">
<script>   
function EnterPress(e){ //传入 event   
    var e = e || window.event;   
    if(e.keyCode == 13){   
    document.getElementById("txtAdd").focus();   
    }   
}   
</script>

重点来了，验证在input失去焦点时怎么做呢？
看下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<input type="text" id="myele" onblur="validate('money',document.getElementById('myele').value)">
    <script type="text/javascript">
        function validate(type,value){
            var dateRegex=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
            switch (type){
                case 'beginTime':{
                    if(!dateRegex.test(value)){
                        callback('日期格式不对');
                    }else if(!isNotNull(value)){
                        callback('不能为空');
                    }
                }
                break;
                case 'endTime':{
                    if(!dateRegex.test(value)){
                        callback('日期格式不对');
                    }else if(!isNotNull(value)){
                        callback('不能为空');
                    }
                }
                break;
                case 'money':{
                    if(value>100||value<0){
                        callback('钱的金额过大或过小');
                    }else if(!isNotNull(value)){
                        callback('不能为空');
                    }
                }
                break;
                default:{
                    if(!isNotNull(value)){
                        callback('不能为空');
                    }
                }

            }
        }
        function isNotNull(value){
            if(value!==null&&value!==undefined&&value!==''){
                return true;
            }else{
                return false;
            }
        }
        function callback(errors){
            alert(errors);
        }
    </script>