1

こんにちは、私は本当にこれにこだわっています。私は JavaScript の初心者なので、これは私の心を揺さぶります。

次の JavaScript フォーム検証の書き方を知っている人はいますか? とても単純なことだと思いますが、命を救うためにこれを理解することはできません。

知識を共有していただきありがとうございます。

次のフォーム検証を jquery なしで記述する必要があります。エラーが発生するたびに、フォームが送信されないようにします。window.onload 関数を使用して検証コールバック関数を割り当てる必要があります。JavaScript コードによって検証される 4 つの入力があります。また、javascript は独自のファイルにある必要があります。

検証ルールは次のとおりです。

入力: ユーザー名; 必須 (はい); 検証 (5 ～ 10 文字の長さである必要があります)。入力: 電子メール; 必須 (はい); 検証 (@ 記号が必要で、ピリオドが必要です)。入力: 通りの名前; 必須 (いいえ); 検証 (数字で始める必要があります)。INPUT: 生年月日; 必須 (はい); 検証 (数値である必要があります)。

私のコードは次のようになります。

HTML:

<!DOCTYPE html>
<html>
<head>


<script defer="defer" type="text/javascript" src="form.js"></script>


</head>
<body>
<form action="fake.php">
    Username*: <input type="text" class="required" name="u"/><br/>
    Email*: <input type="text" class="required" name="p"/><br/>
    Street address: <input type="text" class="numeric" name="s"/><br/>
    Year of birth*: <input type="text" class="required numeric" name="b"/><br/>


    <input type="submit"/><br/>
</form>
</body>
</html>

JS

document.forms[0].elements[0].focus();

document.forms[0].onsubmit=function(){

for(var i = 0; i < document.forms[0].elements.length; i++){

var el = document.forms[0].elements[i];

if((el.className.indexOf("required") != -1) && 
  (el.value == "")){

alert("missing required field");
 el.focus();
el.style.backgroundColor="yellow";
 return false;
}

if((el.className.indexOf("numeric") != -1) && 
 (isNaN(el.value))){


alert(el.value + " is not a number");
 el.focus();
el.style.backgroundColor="pink";
 return false;              
  }
 }
}
4

3 に答える 3

1

コードの大部分を変更せずに...長さなどの他の検証用にコードを更新しました(長さを検証するには、クラスのverifylengthが必要です)など....

これを試して

HTML

<form action="fake.php">Username*:
<input type="text" class="required verifylength" name="u" />
<br/>Email*:
<input type="text" class="required email" name="p" />
<br/>Street address:
<input type="text" class="numeric" name="s" />
<br/>Year of birth*:
<input type="text" class="required numeric" name="b" />
<br/>
<input type="submit" />
<br/>
</form>

ジャバスクリプト

document.forms[0].elements[0].focus();
document.forms[0].onsubmit = function () {
for (var i = 0; i < document.forms[0].elements.length; i++) {
    var el = document.forms[0].elements[i];
    if ((el.className.indexOf("required") != -1) && (el.value == "")) {
        alert("missing required field");
        el.focus();
        el.style.backgroundColor = "yellow";
        return false;
    } else {
        if (el.className.indexOf("verifylength") != -1) {
            if (el.value.length < 5 || el.value.length > 10) {
                alert("'" + el.value + "' must be 5-10 charater long");
                el.focus();
                el.style.backgroundColor = "pink";
                return false;
            }
        }
    }

    if (el.className.indexOf("email") != -1) {
        var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
        var emailTest = regEx.test(el.value);
        if (!emailTest) {
            alert("email not valid");
            el.focus();
            el.style.backgroundColor = "yellow";
            return false;
        }
    };

    if ((el.className.indexOf("numeric") != -1) && (isNaN(el.value))) {
        alert(el.value + " is not a number");
        el.focus();
        el.style.backgroundColor = "pink";
        return false;
    }
 }
}

ワーキングフィドル

于 2013-03-29T08:16:28.957 に答える
0

これが作業中のJavaScript検証オブジェクトです。必要に応じて変更を加えていただければ幸いです。

スタイル

<style>
    .valid {border: #0C0 solid 1px;}
    .invalid {border: #F00 solid 1px;}
</style>

HTMLフォーム

<div>
    <form id="ourForm">
        <label>First Name</label><input type="text" name="firstname" id="firstname" class="" /><br />  
        <label>Last Name</label><input type="text" name="lastname" id="lastname" class="" /><br />  
        <label>Username</label><input type="text" name="username" id="username" class="" /><br />
        <label>Email</label><input type="text" name="email" id="email" class="" /><br />  
        <input type="submit" value="submit" class="" />  
    </form>
</div>

タグを閉じる前にスクリプトを呼び出す

<script src="form_validation_object.js"></script>

form_validation_object.js

/*
 to: dom object
 type: type of event
 fn: function to run when the event is called
 */
function addEvent(to, type, fn) {
    if (document.addEventListener) { // FF/Chrome etc and Latest version of IE9+
        to.addEventListener(type, fn, false);
    } else if (document.attachEvent) { //Old versions of IE. The attachEvent method has been deprecated and samples have been removed.
        to.attachEvent('on' + type, fn);
    } else { // IE5
        to['on' + type] = fn;
    }
}

// Your window load event call
addEvent(window, 'load', function() {
    /* form validation object */
    var Form = {
        validClass: 'valid',
        inValidClass: 'invalid',
        fname: {
            minLength: 1,
            maxLength: 8,
            fieldName: 'First Name'
        },
        lname: {
            minLength: 1,
            maxLength: 12,
            fieldName: 'Last Name'
        },
        username: {
            minLength: 5,
            maxLength: 10,
            fieldName: 'Username'
        },
        validateLength: function(formElm, type) {
            //console.log('string = ' + formElm.value);
            //console.log('string length = ' + formElm.value.length);
            //console.log('max length=' + type.maxLength);
            //console.log(Form.validClass);
            if (formElm.value.length > type.maxLength || formElm.value.length < type.minLength) {
                //console.log('invalid');
                //alert(formElm.className);
                if (formElm.className.indexOf(Form.inValidClass) == -1) {
                    if (formElm.className.indexOf(Form.validClass) != -1) {
                        formElm.className = formElm.className.replace(Form.validClass, Form.inValidClass);
                    } else {
                        formElm.className = Form.inValidClass;
                    }
                }

                //alert(formElm.className);
                return false;
            } else {
                //console.log('valid');
                //alert(formElm.className.indexOf(Form.validClass));
                if (formElm.className.indexOf("\\b" + Form.validClass + "\\b") == -1) { // regex boundary to match whole word only  http://www.regular-expressions.info/wordboundaries.html
                    //formElm.className += ' ' + Form.validClass;
                    //alert(formElm.className);
                    if (formElm.className.indexOf(Form.inValidClass) != -1)
                        formElm.className = formElm.className.replace(Form.inValidClass, Form.validClass);
                    else
                        formElm.className = Form.validClass;
                }
                return true;
            }
        },
        validateEmail: function(formElm) {
            var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
            var emailTest = regEx.test(formElm.value);
            if (emailTest) {
                if (formElm.className.indexOf(Form.validClass) == -1) {
                    formElm.className = Form.validClass;
                }
                return true;
            } else {
                formElm.className = Form.inValidClass;
                return false;
            }
        },
        getSubmit: function(formID) {
            var inputs = document.getElementById(formID).getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == 'submit') {
                    return inputs[i];
                }
            }
            return false;
        }
    }

    /* call validation object */
    var ourForm = document.getElementById('ourForm');
    var submit_button = Form.getSubmit('ourForm');
    submit_button.disabled = 'disabled';

    function checkForm() {
        var inputs = ourForm.getElementsByTagName('input');
        if (Form.validateLength(inputs[0], Form.fname)) {
            if (Form.validateLength(inputs[1], Form.lname)) {
                if (Form.validateLength(inputs[2], Form.username)) {
                    if (Form.validateEmail(inputs[3])) {
                        submit_button.disabled = false;
                        return true;
                    }
                }
            }
        }
        submit_button.disabled = 'disabled';
        return false;
    }

    checkForm();
    addEvent(ourForm, 'keyup', checkForm);
    addEvent(ourForm, 'submit', checkForm);

});

JSBin
http://jsbin.com/ezujog/1での作業例

于 2013-03-29T05:05:25.497 に答える
0

...の線に沿った何か

//username 5-10 chars
var uVal = document.getElementsByTagName("u").value;
if (uVal.length < 5 || uVal.length > 10) return false;

//email needs @ and .
var eVal = document.getElementsByTagName("p").value;
if !(eVal.match('/.*@.*\./g')) return false;

//street starts w/ num
var sVal = document.getElementsByTagName("s").value;
if !(sVal.match('/^[0-9]/g')) return false;

正規表現はオフ+テストされていないと思います:)

于 2013-03-29T04:06:13.370 に答える