登记表验证 [英] Registration form validation

问题描述

我想忽略输入字段的默认值来验证此表单.我尝试了使用jQuery validate插件的所有可能方式.因为我是JS的初学者，所以很难理解如何使用它.

I want to validate this form ignoring default values of input fields. I tried all possible ways with jQuery validate plugin. It's hard to understand how to use it, since I'm a beginner to JS.

我的表单看起来像这样

<?php
require "core/code/includes/db.php";
if (mysqli_connect_errno()) {
        printf("Baza ilə əlaqədə problem var: %s\n Xahiş edirik administrator ilə əlaqə yaradasınız: [e-mail]", mysqli_connect_error());
        exit();
    }
?>
<form id="reg" method="post" action="core/code/functions/signup.php" onSubmit="return checkForm(this);">
<table width="270px" style="clear:both">
<tr>
<td class="numbers" rowspan="3">
1
</td>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Əsas məlumatlar 
</td>
</tr>
<tr>
 <td ><input class="part1 default required" type="text" name="fname" value="Adınız"  /></td>
  <td ><input  class="part1 default required"  type="text" name="mname"  value="Atanızın adı"/></td>
 <td ><input  class="part1 default" type="text" name="lname"  value="Soyadınız" /></td>
</tr>
...

...
<input class="button button-gray"  type="submit" value="Tamam" name="submit"/>
</p>
</form>
<script type="text/javascript" src="core/code/js/jquery-ui.js"></script>
<script src="core/code/js/mask.js"></script>
<script src="core/code/js/reg.js"></script>
<script type="text/javascript" src="core/code/js/acompl.js"></script>  

和reg.js

var defaultValues = {
    'fname': 'Adınız',
    'mname': 'Atanızın adı',
    'lname': 'Soyadınız',
    'phone': 'Telefon',
    'email': 'Email',
    'pwd':'Şifrə',
    'region':'Rayon',
    'school':'Məktəb',
    'login':'Istifadəçi adı',
    'class':'Sinif',
    'subject':'Fənnin adını daxil edin',
    'dob': 'Date of Birth'
};
$('input').live('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

$('input').live('blur', function() {
    var el = $(this);
    var name = el.attr('name');

    // Really we only want to do anything if the field is *empty*
    if (el.val().match(/^[\s\.]*$/)) {

        // To get our default style back, we'll re-add the classname
        el.addClass('default');

        // Unmask the 'dob' field
        if (name == 'dob') {
            el.unmask();
        }

        // And finally repopulate the field with its default value
        el.val(defaultValues[name]);
    }
});

推荐答案

首先，我认为您应该为每个表单元素添加一个id.我认为jQuery不会使用name来获取DOM元素.您的表单有一个ID，但没有输入元素.

First I think you should add an id to each form element. I don't think jQuery will grab a DOM element with its name. Your form has an id but not your input elements.

因此，例如，请参见下面的输入元素(ID可以与名称相同):

So for example, see the input element below (the id can be same as the name):

<input class="part1 default required" type="text" name="pwd" id="pwd" value="Adınız"  />

现在您可以像这样通过jQuery来获取该元素:alert($('#pwd').val());

Now you can grab that element via jQuery like this: alert($('#pwd').val());

pwd之前的#表示该元素是通过其ID选择的. 您也可以像这样引用元素的类来选择元素:alert($('.className').val());，但这将选择所有应用了相同类的匹配元素.做出单一而具体的选择；您应该使用ID.

The # before pwd indicates that the element is being selected by its id. You could also select an element by referecing its class like this: alert($('.className').val()); but this will select all matching elements with the same class applied to them. To make a single and specific select; you should use ids.

因此，如果我理解您的问题是对的；您可以通过检查这些元素的默认值或首先为空来验证它们的值.然后检查其他条件，例如密码长度等.

So, if I understand your question right; you can validate the value of these elements by checking whether they have the default value or if they are empty first. Then checking other criterias such as password length, etc..

    $('#reg').submit(function (event) 
    {
        if ($('#pwd').val() == defaultValues['pwd'] || $.trim($('#pwd').val()) == '')
        {
            alert('Please enter a password!');
            return false;
        }
        else
        {
            if ($('#pwd').val().length < 8)
            {
                alert('Password must have 8 characters at least!');
                return false;
            }
        }
    });

注意:我同意贾里德(Jared)的观点.您也应该在服务器端验证此表单；因为该代码在浏览器中可见，并且可以很容易地被绕过.

Note: I agree with Jared. You should validate this form on the server-side too; since the code is visible in the browser and can easily be by-passed.

这篇关于登记表验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！