javascript - 如何在 div javascript 或 jQuery 中验证文本框

Question

如何在我的 JavaScript 中将一种验证类型集成到 If value of var firstName is = to null 不要附加 var sHtml 和 summaryHtml 并更改类以更改文本框边框并清除字段

规则：

firstName = must contain at least 1 letter and no more than 15 letters
lastName = must contain at least 1 letter and no more than 15 letters
jobTitle = must contain something other than an option value of "" (in the html option tag)
eSculation = must contain something other than an option value of "" (in the html option tag)
mobilePhone = must contain 9 numbers.  This field has a mask attached: (999) 999-99999
officePhone =  = must contain 9 numbers.  This field has a mask attached: (999) 999-99999
eMail = Must contain the following symbol: an @ sign and a . to represent xxx@xx.xxx

我用来提交表格的 JavaScript 如下：

newRow = 1;
currentRow = -1;

function CompanyContacts() {
var rowID = parseInt(document.getElementById("ContactsRowCount").value, 10);
rowID++;
if (currentRow > 0) {
    saveEdits();
} else {
    var firstName = $("#ccFirst").val();
    var lastName = $("#ccLast").val();
    var jobTitle = $("#ccjTitle").val();
    var eSculation = $("#ccEsculation").val();
    var mobilePhone = $("#ccMobile").val();
    var officePhone = $("#ccOffice").val();
    var eMail = $("#ccEmail").val();
    var sHtml = "<tr id='row" + rowID + "'>" +
        "<td class='tblStyle68wlb' id=\"ccFirst" + rowID + "\">" + firstName + "</td>" +
            "<input type=\"hidden\" value=\"" + firstName + "\" name=\"cFirst" + rowID + "\" />" +
        "<td class='tblStyle68wl' id=\"ccLast" + rowID + "\">" + lastName + "</td>" +
            "<input type=\"hidden\" value=\"" + lastName + "\" name=\"cLast" + rowID + "\" />" +
        "<td class='tblStyle68wlb' id=\"ccjTitle" + rowID + "\">" + jobTitle + "</td>" +
            "<input type=\"hidden\" value=\"" + jobTitle + "\" name=\"cJobTitle" + rowID + "\" />" +
        "<td class='tblStyle68wl' id=\"ccEsculation" + rowID + "\">" + eSculation + "</td>" +
            "<input type=\"hidden\" value=\"" + eSculation + "\" name=\"cContactPoint" + rowID + "\" />" +
        "<td class='tblStyle68wlb' id=\"ccMobile" + rowID + "\">" + mobilePhone + "</td>" +
            "<input type=\"hidden\" value=\"" + mobilePhone + "\" name=\"cMobilePhone" + rowID + "\" />" +
        "<td class='tblStyle68wl' id=\"ccOffice" + rowID + "\">" + officePhone + "</td>" +
            "<input type=\"hidden\" value=\"" + officePhone + "\" name=\"cOfficePhone" + rowID + "\" />" +
        "<td class='tblStyle68wlb' id=\"ccEmail" + rowID + "\">" + eMail + "</td>" +
            "<input type='hidden' value='" + eMail + "' name='cEmail" + rowID + "' />" +
        "<td class='tblStyle68wl' ><button type='button' class='XsmallButtons' onclick='editRow(" + rowID + ")'>Edit</button>" +
        "</td><td class='tblStyle68wlb' ><button type='button' class='XsmallButtons' onclick='deleteRow(" + rowID + ")'>Delete</button>" +
        "</td></tr>";
    var summaryHtml = "<tr id='SummaryRow" + rowID + "'>" +
        "<td id='ccFirst" + rowID + "'>" + firstName + "</td>" +
        "<td id='ccLast" + rowID + "'>" + lastName + "</td>" +
        "<td id='ccjTitle" + rowID + "'>" + jobTitle + "</td>" +
        "<td id='ccEsculation" + rowID + "'>" + eSculation + "</td>" +
        "<td id='ccMobile" + rowID + "'>" + mobilePhone + "</td>" +
        "<td id='ccOffice" + rowID + "'>" + officePhone + "</td>" +
        "<td id='ccEmail" + rowID + "'>" + eMail + "</td>" +
        "</tr>";
    $("#customerContactSubmitedTable").append(sHtml);
    $("#SummaryCCTable").append(summaryHtml);
    newRow++;
    document.getElementById("ContactsRowCount").value = rowID;
    $("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
}
}
function editRow(rowID) {
$('#ccFirst').val($('#ccFirst' + rowID).html());
$('#ccLast').val($('#ccLast' + rowID).html());
$('#ccjTitle').val($('#ccjTitle' + rowID).html());
$('#ccEsculation').val($('#ccEsculation' + rowID).html());
$('#ccMobile').val($('#ccMobile' + rowID).html());
$('#ccOffice').val($('#ccOffice' + rowID).html());
$('#ccEmail').val($('#ccEmail' + rowID).html());
currentRow = rowID;
}
function saveEdits() {
$('#ccFirst' + currentRow).html($('#ccFirst').val());
$('#ccLast' + currentRow).html($('#ccLast').val());
$('#ccjTitle' + currentRow).html($('#ccjTitle').val());
$('#ccEsculation' + currentRow).html($('#ccEsculation').val());
$('#ccMobile' + currentRow).html($('#ccMobile').val());
$('#ccOffice' + currentRow).html($('#ccOffice').val());
$('#ccEmail' + currentRow).html($('#ccEmail').val());
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
currentRow = -1;
}
function deleteRow(rowID) {
$('#row' + rowID).remove();
$('#SummaryRow' + rowID).remove();
var rowCount = parseInt(document.getElementById("ContactsRowCount").value, 10);
rowCount--;
document.getElementById("ContactsRowCount").value = rowCount;
}
function ccClear() {
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
}

score 0 · Accepted Answer

我建议的是一个验证jQuery插件，您可以找到其中的许多插件，然后从下面选择适合您需求的套件：

jquery.bassistance

ddarrenjQuery-Live-Form-Validation-For-Twitter-Bootstrap

jzae fferer-jquery 验证

或者您在jQuery.com网站上搜索以获取许多与 jquery 兼容的验证插件。

但是如果您不想使用任何插件，那么您必须编写自己的验证代码。

电子邮件和其他字段验证功能：

function emailValidate(e){
        var p = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return p.test(e);
    }
function validate(val, min, max){
    return (val.length < min || val.length > max?false:true);
}
vfirstName = validate(firstName,1,15);//if between 1 and 15 will return true
vlastName = validate(lastName ,1,15);//if between 1 and 15 will return true
vjobTitle = validate(jobTitle ,1,50);//if between 1 and 15 will return true
veSculation = validate(eSculation ,1,50);//if between 1 and 15 will return true
vmobilePhone = validate(eSculation ,1,50);//if between 1 and 15 will return true
vofficePhone = validate(officePhone,12,12);//because `(999) 999-99999` length is 12
veMail = emailValidate(eMail);//also will return false if wrong email format
if(vfirstName && vlastName && vjobTitle && veSculation && vmobilePhone && vofficePhone && veMail)
    var errors = false;
else
    var errors = true;

然后在附加生成的行之前，您可以添加一些条件，例如：

if(!errors){
$("#customerContactSubmitedTable").append(sHtml);
//....rest of your code
}else
alert('please correct the fields');//or any other event

score 0 · Accepted Answer

首先将 a 添加validation="regex here"到输入标签中，以便为它们提供简单的视觉通知。除此之外，如果您想使用 jQuery 进行验证，您可以检查每个值，如果有无效则不发送 ajax 请求，使用类似这样的方法来验证（在这种情况下为字符串）值是否正确$(your_element_here).val().match(your_regex_here)

也许一个if ($(#id).val().match(some_verification_regex) == null){ return false }

只有字母：/^[A-z]+$/

像你上面提到的电话号码：/^$\d{3}$ \d{3}-\d{4}$/

javascript - 如何在 div javascript 或 jQuery 中验证文本框

2 回答 2

Related

Reference