Question

首先，我不擅长PHP并学习它，请帮忙。

我想创建一个页面，我只接受手机号码和文本，然后在下面的检查后将其发送到'process.php'进行下一步。

A1-移动字段仅包含数字（没有字母，没有'+或 - '，没有'逗号'）。如果字段包含任何非数字，警告“仅允许数字值”，请删除移动字段包含并再次关注它。

A2-移动字段仅允许10位数（不小于等于10或不大于等于10）。如果字段包含少于或多于10位数，请提示“仅允许10位数字”，删除移动字段包含并再次关注它。

A3-移动字段的数字以7,8或9开头（不允许其他起始数字，如0到6）。如果开始包含0到6，则警告“在允许的情况下仅允许7,8或9”，删除移动字段包含并再次关注它。

A4-如果移动字段保持空白，请提示“请输入手机号码”。

B1-文本字段仅检查160个字符（少于160个允许但不允许超过160个）并在文本字段下方显示实时“字符保留”字段。

B2-如果文本字段保持空白，请提示“请输入文字按摩”。

如果所有'A'部分（适用于移动领域）＆amp; 'B' - 部分（用于文本按摩字段）有效性检查完成，然后移动字段和文本按摩字段将其数据发送到'process.php'以进行下一步骤。

我已经做了很长时间但仍需要做更多工作并妥善安排。请提前帮助并谢谢你

<script language="javascript" type="text/javascript">
// <![CDATA[
function checkNum(x) {
    if (!(/^\d+\d{9}$/.test(x.value))) {
        alert("Only 10 Digits Numeric Values Allowed");
        x.focus();
        return false;
    }
    return true;
}
// ]]>
</script>
<script type = "text/javascript" >
// <![CDATA[
$(window).load(function () {
    $("#tm_field").keyup(function () {
        el = $(this);
        if (el.val().length >= 160) {
            el.val(el.val().substr(0, 160));
        } else {
            $("#charNum").text(160 - el.val().length);
        }
    });
});
// ]]>
</script>
</p>
<p>
    <title>Test Page</title>
</p>
<p><strong>This Free SMS page is still under construction,</strong></p>
<p><strong>M working on it &amp; it will start soon ................</strong></p>
<form action="process.php" method="post">
    <table border="1" align="center">
        <tbody>
            <tr>
                <td><span data-mce-mark="1"><span color="red" style="color: red;" data-mce-mark="1">*</span> Mobile Number </span></td>
                <td>
                    <p><input type="text" name="NUM" id="mn_field" onchange="checkNum(this)" /></p>
                    <p><small> Please enter 10 digits mobile number, only.</small></p>
                </td>
            </tr>
            <tr>
                <td><span data-mce-mark="1"><span color="red" style="color: red;" data-mce-mark="1">*</span> Text Message </span></td>
                <td align="center"><textarea id="tm_field" rows="7" cols="25"></textarea></td>
            </tr>
            <tr>
                <td colspan="1" align="center">Character remain(s)</td>
                <td id="charNum">160</td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="Bye Bye SMS" /></td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#ffffcc" align="center"><small><span style="text-decoration: underline;" data-mce-mark="1">N.B.</span><strong> </strong>:- A " <span color="red" style="color: red;" data-mce-mark="1">*</span> " indicates a field is required</small></td>
            </tr>
        </tbody>
    </table>
</form>

Answer 1

鉴于您的要求，我会写出数字验证功能（A），如下所示：

    var checkMobileNumber = function checkMobileNumber(number) {
            var nonNumeric = /\D+/g,
                indianMobileNumber = /^[7-9]\d{9}$/g,
                allNumeric = false,
                match = false,
                isValid = false,
                message = '',
                error = {
                    "": null,
                    "required": "A mobile number is required.",
                    "invalid": "The mobile number you have entered must start with 7, 8, or 9.",
                    "wrong length": "The mobile number must consist of exactly 10 digits.",
                    "non-numeric": "The mobile number can only consist of numeric values."
                };
        if (number.length !== 10) {
            if (number.length === 0) {
                message = 'required';
            } else {
                message = 'wrong length';
            }
        } else {
            allNumeric = !nonNumeric.test(number);
            match = indianMobileNumber.test(number);
            isValid = allNumeric && match;
            if (!isValid) {
                if (!allNumeric) {
                    message = 'non-numeric';
                } else {
                    message = 'invalid';
                }
            }
        }
        // returning an object containing the overall validity and the error message
        return {
            "isValid": isValid,
            "errorMessage": error[message]
        };
    };

并在form.submit上集成消息验证功能，如下所示：

    $('form').on('submit', function (e) {
        var errSum = $('.error.summary').empty(),
            num = $('#mobileNumber'),
            sms = $('#smsMessage'),
            smsIsValid = sms.val().trim().length > 0,
            test = checkMobileNumber(num.val()),
            p = $('<p />');
        if (!smsIsValid || !test.isValid) {
            e.preventDefault();
        }
        if (!test.isValid) {
            errSum.append(p.clone().text(test.errorMessage));
            num.get(0).focus();
        }
        if (!smsIsValid) {
            errSum.append(p.clone().text('Please enter a message to send.'))
            if (test.isValid) { // no sense in taking focus away if the mobile number is bad.
                sms.get(0).focus();
            }
        }
        num.siblings('.error').toggleClass('active', test.isValid);
        sms.siblings('.error').toggleClass('active', sms.isValid);
        // normal correct return is below.
        return test.isValid && smsIsValid;
    });

工作演示：http://jsfiddle.net/rawvm/

您可能会注意到，工作演示通过向div元素添加错误消息而不是调用alert来警告用户（这对您的用户更有礼貌）。

<强>更新

对于你的小提琴，只需制作：

alert('Wait: SMS Sending...');
return false; // return false to prevent form submission or return true to allow it

validateForm处理程序的最后两行。更新了您的小提琴：http://jsfiddle.net/nDcUT/4/

但是，如果您查看http://jsfiddle.net/rawvm/，您唯一需要做的就是在form.submit处理程序的末尾将文本更改为“等待..短信发送”。

您还可能会注意到，在我的演示中，我没有使用内联JavaScript处理程序，而且我严格地将内容与表示和行为分开。

这是一个很好的做法（你可以在网上阅读大量关于它的文章）。一个好的开始是http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

手机号码和消息文本检查

1 个答案: