Question

我有一个html表单，它使用用户名和密码作为输入。点击按钮，写了一个js函数，它将异步命中api。在此之前，我将如何验证它

 <form>
        <div><label id="resultString"></label></div>
        <fieldset>
            <legend>Login</legend>
            Username: <input type="text" id="username"><br><br>
            Password: <input type="password" id="password"><br><br>
            <input type="button" onclick="submitdetails();" value="Login">
        </fieldset>
    </form>

我的js功能是：

function submitdetails() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var params = JSON.stringify({ username: username, password: password });
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
            if (xmlhttp.status == 200) 
            document.getElementById("resultString").innerHTML = xmlhttp.responseText;
        else
            document.getElementById("resultString").innerHTML = "Error"; 
        }
    };
    xmlhttp.open("POST","http://127.0.0.1:8000/login/",true);     
    xmlhttp.send(params);
}

Answer 1

{{1}}

这是验证器插件代码：

{{1}}

参考：https://jqueryvalidation.org/

DEMO

要记住的事情

您的表单应该有一个名称和ID
我说，也为所有字段提供姓名和ID
使用提交处理程序执行您在onclick上执行的调用

Answer 2

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    var y = document.forms["myForm"]["email"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.email.value))
  {
    return (true)
  }
    alert("You have entered an invalid email address!")
    return (false)
}


</script>
</head>
<body>

<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<br/>
email: <input type="text" name="email">
<br/>
<input type="submit" value="Submit">
</form>

</body>
</html>

但它易于使用jQuery validate plugin

演示：https://jqueryvalidation.org/files/demo/

文档：https://jqueryvalidation.org/documentation/

示例代码 -

$("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });

Answer 3

使用以下条件

if(username ==null || username =="")
{
 document.getEelementById("showerr").innerHTML = "is empty";
}
if(password==null || password =="" password.length  < 6)
{
 document.getEelementById("showerr").innerHTML = "must 6 or above characters";
}

HTML：

<span id="showerr"></span>

使用正则表达式可以验证

http://jsfiddle.net/ghvj4gy9/embedded/result,js/

Answer 4

 <script>
function submitdetails() {
var username = $("#username").val();
   var password = $("#passwords").val();
 if(username==""||password=="")
 {
alert("please fill");
}
var params = JSON.stringify({ username: username, password: password });
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if (xmlhttp.status == 200) 
        document.getElementById("resultString").innerHTML = xmlhttp.responseText;
    else
        document.getElementById("resultString").innerHTML = "Error"; 
    }
};
xmlhttp.open("POST","http://127.0.0.1:8000/login/",true);     
xmlhttp.send(params);

}

如何验证表单

4 个答案: