javascript系列之表单验证

鱼馅饼

于 2023-08-16 12:23:17 发布

阅读量435

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：https://www.tutorialspoint.com/javascript/javascript_form_validations.htm

版权

一.欢迎来到我的酒馆

表单验证一般发生在服务器端，在客户端输入必要的数据然后按下submit按钮之后就可以进行服务器端的表单验证。如果客户端的数据输入不正确或有遗漏，这时候服务器端不得不发送所有的数据到客户端，并要求使用正确的信息重新提交表单。这是一个耗时的过程，而且增加了服务器的负担。
在发送数据到服务器之前，JavaScript提供一种验证表单数据的方式，表单验证一般执行两个函数：

基础验证。首先，必须检查表单并保证所有的强制性的字段都输入了，这将会需要一个循环遍历每个表单的字段和检查数据。
数据格式验证。第二，输入的数据必须检查格式和值。代码必须包含适当的逻辑来测试数据的正确性。

二.表单验证

下面将通过一个案例来理解验证的流程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function validate(){
        //基础验证，验证用户输入是否为空。
        }
    </script>
</head>
<body>
<form action=".cgi" name="myform" onsubmit="return (validate())">
    <table border="1">
        <tr>
            <td align="right">usename:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td align="right">email:</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td align="right">zip:</td>
            <td><input type="text" name="zip"> </td>
        </tr>
        <tr>
            <td align="right">country:</td>
            <td><select name="country">
                <option value="-1" selected>choose your country</option>
                <option>a</option>
                <option>b</option>
                <option>c</option>
            </select></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="submit" > </td>
        </tr>
    </table>
</form>
</body>
</html>

输出：
在这里插入图片描述
首先，来看一下如何做一个基本的表单验证。在上面的表单中我们调用了validate()函数去验证数据，当onsubmit事件发生时验证数据。

        function validate(){
            if(document.myform.username.value === ""){
                window.alert("please provide your name !");
                window.document.myform.username.focus();
                return false;
            }
            if(document.myform.email.value === ""){
                window.alert("please provide your email!");
                window.document.myform.email.focus();
                return false;
            }
            if (document.myform.zip.value === "" || isNaN(document.myform.zip.value) || document.myform.zip.value.length !== 5){
                window.alert("please provide a zip in the format!");
                window.document.myform.zip.focus();
                return false;
            }
            if(document.myform.country.value === "-1"){
                window.alert("please choose your country!");
                window.document.myform.country.focus();
                return false;
            }
            return true;
        }

二.数据格式验证

现在，我们将会看到在提交到web服务器之前如何验证输入的表单数据。
下面的例子演示了如何验证已经输入的电子邮箱地址。一个电子邮箱必须包含一个"@“和一个”.“。同理，”@“不应该是eamil地址的第一个字符，最后，”.“必须至少在”@"一个字符之后。

        function validateEmail(){
            let emailid = window.document.myform.email.value;
            //indexOf()：首先按照指定字符搜索字符串中第一次出现字符的下标，并且返回这个下标。
            emailpos = emailid.indexOf("@");
            //lastIndexOf():首先按照指定字符搜索字符串中最后一次出现字符的下标，并且返回这个下标。
            dotpos = emailid.lastIndexOf(".");
            if(emailpos < 1 || (dotpos - emailpos) < 2){
                window.alert("please enter correct email !");
                window.document.myform.email.focus();
                return false;
            }

            return true;
        }

鱼馅饼

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript系列之表单验证

表单验证一般发生在服务器端，在客户端输入必要的数据然后按下submit按钮之后就可以进行服务器端的表单验证。如果客户端的数据输入不正确或有遗漏，这时候服务器端不得不发送所有的数据到客户端，并要求使用正确的信息重新提交表单。同理，”@“不应该是eamil地址的第一个字符，最后，”.“必须至少在”@"一个字符之后。在上面的表单中我们调用了validate()函数去验证数据，当onsubmit事件发生时验证数据。现在，我们将会看到在提交到web服务器之前如何验证输入的表单数据。
复制链接

扫一扫