javascript - 如何为我的网站进行表单验证

Question

我正在处理我的应用程序的注册表单页面，但我想在将其发送到下一页之前验证该表单。这是表格。

<form action="jobinpal_process.php?account=ceo" method="post">
                    <ul>
                        <img src="../img/step1ceo.png.png" id="jp_ceo_img_reg">
                        <label id="jp_ceo_reg_label">CEO registration </label>
                        <hr id="suck"></hr>
                        <li id="jobinpal_ceo_reg_name"><input type="text" placeholder="name" name="jobinpal_ceo_name" id="jp_n"></li>
                        <li id="jobinpal_ceo_reg_mname"><input type="text" placeholder="middlename" name="jobinpal_ceo_middlename" id="jp_m"></li>
                        <li id="jobinpal_ceo_reg_lnamex"><input type="text" placeholder="lastname" name="jobinpal_ceo_lastname" id="jp_l"></li>
                        <li id="jobinpal_ceo_reg_sex">
                        <!--<input type="text" placeholder="sex" name="jobinpal_ceo_sex">-->
                        <select id="jp_s">
                            <option value= default selected  >Sex</option>
                            <option>Male</option>
                            <option>Female</option>
                            <option>Others</option>
                        </select>
                        </li>
                        <!--<li id="jobinpal_ceo_reg_title"><input type="text" placeholder="title" name="jobinpal_ceo_title"></li>-->
                        <li id="jobinpal_ceo_reg_email"><input type="text" placeholder="email" name="jobinpal_ceo_email" id="jp_e"></li>
                        <li id="jobinpal_ceo_reg_country"><input type="text" placeholder="country" name="jobinpal_ceo_country" id="jp_c"></li>
                        <!--<li id="jobinpal_ceo_reg_state"><input type="text" placeholder="state" name="jobinpal_ceo_state"></li>-->
                        <li id="jobinpal_ceo_reg_phone"><input type="text" placeholder="phone" name="jobinpal_ceo_phone" id="jp_p"></li>
                        <li id="jobinpal_ceo_reg_cname"><input type="text" placeholder="company name" name="jobinpal_ceo_cname" id="jp_cn"></li>
                        <input type="hidden" value="ceo" name="jobinpal_account">
                        <li id="jobinpal_ceo_reg_password"><input type="text" placeholder="password" name="jobinpal_ceo_password" id="jp_p"></li>
                        <li id="jobinpal_ceo_reg_cpassword"><input type="text" placeholder="confirm password" name="jobinpal_ceo_cpassword" id="jp_pp"></li>
                        <li id="jobinpal_ceo_reg_submit"><button type="submit" name="jobinpal_ceo_sub" id="jp_sub">Job in</button></li>

                    </ul>


                </form>

必填字段是

• 姓名
• 姓氏
• 性别
• 电子邮件
• 国家
• 电话
• 密码

验证将以此为基础，如果必填字段为零，则会显示弹出错误，电子邮件字段不是电子邮件，如果密码长度必须为 8 且包含大小写字符，也应弹出错误。

Answer 1

这是您想要实现的目标的工作示例，我使用了 jquery 验证插件，并添加了一些自定义验证函数(例如密码)

$(document).ready(function () {
$.validator.addMethod('vpassword', function(value, element) {
 return this.optional(element) || value.match(/[a-z]/) && value.match(/[A-Z]/);
 }, "Invalid password format, password must be 8 characters and contain uppercase and lowercase");
jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != '0');
}, "sex required");

 $("#contact-form").validate({

    // Specify the validation rules
    rules: {
        jobinpal_ceo_name: "required",
        jobinpal_ceo_middlename: "required",
        jobinpal_ceo_lastname: "required",
        jobinpal_ceo_country: "required",
        jobinpal_ceo_phone: "required",
        select: {
            required: true,
            selectcheck: true
        },
        jobinpal_ceo_email: {
            required: true,
            email: true
        },
        jobinpal_ceo_password: {
            minlength: 8,
            vpassword: true
        },
        jobinpal_ceo_cpassword : {
                minlength : 8,
                vpassword: true,
                equalTo : "#jobinpal_ceo_password"
            }
    }
});
});

Fiddle