表单禁止重复提交

需求：1、禁止重复点击提交按钮；2、电话只能包含数字+-和空格

HTML:

<form action="" name="common" onsubmit="return dosubmit()">
    <input type="text" name="tel" placeholder="Tel:">
    <input type="submit" value="Send">
</form>

JS:

 1 var commitStatus = false;
 2 function dosubmit() {
 3     var str = document.forms['common']['saytext'].value,
 4         pattern = /([^-~!@#$%^&*()_+`-]+){3}/,
 5         tel = document.forms['common']['mycall'].value,
 6         patternTel = /[\d\s+-]+/;
 7     if (commitStatus == true) {
 8         alert('Repeat');
 9         return false;
10     } else if ((commitStatus == false) && (pattern.test(str) == false)) {
11         alert('Please fill in your requirements in the message, such as what pellets to produce, raw materials, and capacity.');
12         return false;
13     } else if ((commitStatus == false) && (pattern.test(str) == true) && (tel == '')) {
14         commitStatus = true;
15         return true;
16     } else if ((commitStatus == false) && (pattern.test(str) == true) && (patternTel.test(tel) == false)) {
17         alert('Please fill in the correct phone format');
18         return false;
19     } else {
20         commitStatus = true;
21         return true;
22     }
23 }

注：刷新后还是可以再次填写提交的。

posted @ 2022-03-02 15:07  Arya-Wang  阅读(94)  评论(0)    收藏  举报