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

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

Answer 2

使用jQuery validation plugin。

没有人会为您编写代码。但是，在您的网站上实施验证时，您可以使用以下代码作为参考。

$(document).ready(function() {

        // Remove red borders on click
        var $FORM = $("#registration-form");

        $FORM.validate({
            rules: {
                username: "required",
                email: {
                    required: true,
                    email: true
                },
                first_name: "required",
                last_name: "required",
                city: "required",
                password: {
                    required: true,
                    minlength: 8
                },
                password_confirm: {
                    equalTo: $("#password")
                }
            },
            messages: {
                username: "Please choose a username",
                email: {
                    required: "Please enter your e-mail address",
                    email: "Please provide a valid e-mail address"
                },
                first_name: "Please enter your first name",
                last_name: "Please enter your last name",
                city: "Please select a city",
                password: {
                    required: "Please enter a password",
                    minlength: "The password must be at least 8 characters long"
                },
                password_confirm: {
                    required: "Please enter the password again",
                    equalTo: "The passwords do not match"
                }
            },
            errorPlacement: function(error, element) {
                // Do stuff...
            }
        });

    });

Answer 3

在提交表单时调用 java 脚本函数来验证您的字段。 Java Script 函数可以通过替换来调用

<li id="jobinpal_ceo_reg_submit"><button type="submit" name="jobinpal_ceo_sub" id="jp_sub">Job in</button></li>

由

<li id="jobinpal_ceo_reg_submit"><button type="submit" name="jobinpal_ceo_sub" id="jp_sub" onClick="javascript: return yourfunction()">Job in</button></li>

那么你的java脚本就有这个功能了

function yourfunction()
{
     if (document.getElementById('jobinpal_ceo_reg_name').value=="") {
        alert("Please enter your name");
        return false;
      }
      if (document.getElementById('jobinpal_ceo_reg_mname').value=="") {
         alert("Please enter your middle name");
          return false;

       }  

    // Like this , you can validate what you want
    //Hope this helps
}