Form Validation

Why do you need form validation

After the user writes his username and password, he or she eventually needs to submit it it to the server.
Users register QQ numbers and submit information to Tencent servers

Benefits of using front-end validation

Reduce server pressure
 Ensure that the input data meets the requirements

Ideas for Form Verification

1 - Get form element values
 2 - Using JavaScript to Judge Data
 3 - When a form is submitted, trigger an event to validate the acquired data

case

Verify that the username cannot be empty

// Submitting events using form object binding
$("form").submit(function(){
    // Not empty
    if($("#username").val() == ""){
        alert("User name cannot be empty, Please re-enter");
        // Use return true or false to determine whether the method continues to execute
        return false;
    }
    return true;
});

Judging between 6 and 18 bits of username

$("form").submit(function(){
    var value = $("#username").val();
    if(value.length < 6 || value.length > 18){
        alert("User name length must be 6- 18 Between bits!");
        return false;
    }
    return true;
});

Mailbox Verification

$("form").submit(function(){
    var value = $("#email").val();
    // Get the subscript of @ and. in email and the subscript of @ should be before.
    var index1 = value.indexOf("@");
    var index2 = value.lastIndexOf(".");
    if(!(index1 != -1 && index2 != -1 && index1 < index2)){
        alert("Mailbox does not meet the requirements!");
        // Use return true or false to determine whether the method continues to execute
        return false;
    }
    return true;

Mobile phone numbers must be all first digits and then 10 digits.

// Submitting events using form object binding
$("form").submit(function(){
    var value = $("#telephone").val();
    // Is it 11 digits first digit 1 (the next 10 digits are all digits)
    var len = value.length;
    if(len != 11){
        alert("Must be 11 bits");
        return false;
    }
    // Use strings to intercept the first bit
    var first = value.substring(0,1);
    // console.log(first);
    if(first != "1"){
        alert("The number of mobile phone must be 1");
        return false;
    }
    // The next 10 digits are all numbers.
    for(let i = 1;i < value.length; i++){
        let m = value.substring(i,i+1);
        // The meaning of the isNaN() function is that Not a Number is Not a Number.
        if(isNaN(m)){
            alert("All data must be digital");
            return false;
        }
    }
});

Is the two password inputs consistent?

$("form").submit(function(){
    var pwd = $("#pwd").val();
    if (pwd == "") {
        alert("Password cannot be empty");
        return false;
    }
    if (pwd.length < 6) {
        alert("Password must be equal to or greater than 6 characters");
        return false;
    }
    var repwd = $("#repwd").val();
    if (pwd != repwd) {
        alert("Two inconsistent passwords");
        return false;
    }
})

Implementing dynamic prompt information

Form Events

Focus event focus

// Focusing on Events
$("#pwd").focus(function(){
    $(this).next().empty();
    //  $(this).next().html("");
});

Loss of focus event blur

$("#pwd").blur(function(){
    var mess;
    var pwd = $(this).val();
    if (pwd == "") {
        mess = "Password cannot be empty!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    if (pwd.length < 6) {
        mess = "Password length should not be less than 6 characters!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    mess = "Password Available!!";
    $(this).next().html(mess.fontcolor("green"));
});

regular expression

Why Regular Expressions are Needed

Concise code
 Strict validation of content in text boxes

regular expression syntax

General Grammar

Special Symbols

Quantitative Rules

Regular Specification for Mobile Phone Numbers

1[35678]\d{9}

Application of Regular Expressions in JS

case

$("#telephone").blur(function(){
    // Define a regular expression
    var reg = /^1[35678]\d{9}$/;
    var tele = $(this).val();
    // test() method satisfies regular return true and does not satisfy return false
    // alert(reg.test(tele));
    if(reg.test(tele)){
        $(this).next().html("Mobile number available".fontcolor("green"));
    }else{
        $(this).next().html("Error in mobile number".fontcolor("red"));
    }
});

Regular Specification of Mailbox

User name, password, e-mail, mobile phone number, ID number, birthday, postal code, fixed telephone

Definition of Regular Expressions

First

var reg = /^$/;
var reg = /^1[35678]\\d{9}$/;

The second type (structure)

var reg = new RegExp("");
var reg = new RegExp("^1[35678]\\d{9}$");

Transferable parameters

g: global matching
 i: Case-insensitive matching
 m: Multiple matches can be made

var reg = /^1[35678]\\d{9}$/g;
var reg = new RegExp("^1[35678]\\d{9}$","g");

common method

The method test() of regular expression

Method match() in string

Age validation

Between 0 and 120

var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
^120$ 
^((1[0-1]|[1-9])?\d)$    ( 0 - 119)