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
}

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

3 个答案: