Heim Web-Frontend js-Tutorial jQuery formValidator表单验证

jQuery formValidator表单验证

Jun 01, 2016 am 09:54 AM
jquery 表单 验证

html部分:

<code class="language-html">


<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>


<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名:</label></td>
<td><input type="text" id="uname" name="uname"></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td><input type="password" id="pwd" name="pwd"></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码:</label></td>
<td><input type="password" name="repwd" id="repwd"></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female">
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区:</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证:</label></td>
<td><input type="text" id="num" name="num"></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码:</label></td>
<td><input type="text" name="phone" id="phone"></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" name="email" id="email"></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
    formID: "myfm",
    debug: false,
    submitOnce: true,
    validatorGroup: '1',
    //设置验证组,默认值为1
    onSuccess: function() { //验证成功后的回调函数
    },
    onError: function() { //验证失败后的回调函数
    }
});
$('#uname').formValidator({
    ValidatorGroup: '1',
    //验证组为1 
    onEmpty: '用户名不能为空',
    //提示用户名不能为空
    onShow: "",
    onFocus: '用户名必须为1到12位的数字或字母',
    //表单元素获得焦点的时候提示应输入的格式
    onCorrect: '用户名输入正确' //输入正确的提示
}).regexValidator({
    regExp: '^[0-9a-zA-Z]{1,12}$',
    //验证表单输入的正则表达式
    onError: '用户名格式有误,请从新输入' //输入错误的提示
}).ajaxValidator({ //验证输入的用户名是否已经存在
    dataType: 'html',
    //请求数据的格式
    async: true,
    //异步方式
    url: 'test.php',
    success: function(data) {
        if (data == 'false') {
            return false;
        } else {
            return true;
        }
    },
    onError: '该用户名已存在,请从新输入',
    onWait: '正在对用户名进行合法性校验,请稍候...'
});
$('#pwd').formValidator({
    ValidatorGroup: '1',
    onEmpty: '密码不能为空',
    onShow: "",
    onFocus: '密码必须为6位以上的字母或数字',
    onCorrect: '密码输入正确'
}).regexValidator({
    regExp: '[0-9a-zA-Z]{6,}',
    onError: '密码格式有误,请从新输入'
});
$('#repwd').formValidator({
    ValidatorGroup: '1',
    onEmpty: '密码不能为空',
    onShow: "",
    onFocus: '密码必须为6位以上的字母或数字',
    onCorrect: '密码输入正确'
}).regexValidator({
    regExp: '^[0-9a-zA-Z]{6,}$',
    onError: '密码格式不正确'
}).compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
    desID: 'pwd',
    //相比较的表单元素的ID值
    operateor: '=',
    //要比较的两个元素之间的关系
    onError: '两次密码输入不一致,请从新输入' //不满足以上关系的时候的提示
});
$('#num').formValidator({
    ValidatorGroup: '1',
    onEmpty: '身份证不能为空',
    onShow: '',
    onFocus: '请输入您的身份证号',
    onCorrect: '身份证格式正确'
}).regexValidator({
    regExp: '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
    //15位身份证号码的正则表达式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
    onError: '身份证格式有误,请从新输入'
});
$('#phone').formValidator({
    ValidatorGroup: '1',
    onEmpty: '手机号码不能为空',
    onShow: '',
    onFocus: '请输入您的手机号码',
    onCorrect: '手机号码格式正确',
}).regexValidator({
    regExp: '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
    onError: '手机号码格式有误,请从新输入'
});
$('#email').formValidator({
    ValidatorGroup: '1',
    onEmpty: '邮箱地址不能为空',
    onShow: '',
    onFocus: '请输入您的邮箱地址',
    onCorrect: '邮箱格式正确'
}).regexValidator({
    regExp: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
    onError: '邮箱格式有误,请从新输入'
});
</script>

</code>
Nach dem Login kopieren

php部分代码:

<code class="language-php"><?php header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) { 
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?></code>
Nach dem Login kopieren

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung Detaillierte Methode zum Entsperren mithilfe der freundunterstützten WeChat-Verifizierung Mar 25, 2024 pm 01:26 PM

1. Klicken Sie nach dem Öffnen von WeChat auf das Suchsymbol, geben Sie das WeChat-Team ein und klicken Sie zum Betreten auf den Dienst unten. 2. Klicken Sie nach der Eingabe auf die Option „Self-Service-Tool“ in der unteren linken Ecke. 3. Klicken Sie nach dem Anklicken in den Optionen oben auf die Option zum Entsperren/Einspruch für eine zusätzliche Verifizierung.

Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt Neue Funktionen in PHP 8: Verifizierung und Signierung hinzugefügt Mar 27, 2024 am 08:21 AM

PHP8 ist die neueste Version von PHP und bietet Programmierern mehr Komfort und Funktionalität. Bei dieser Version liegt ein besonderer Schwerpunkt auf Sicherheit und Leistung, und eine der bemerkenswerten neuen Funktionen ist die Hinzufügung von Verifizierungs- und Signierungsfunktionen. In diesem Artikel werfen wir einen genaueren Blick auf diese neuen Funktionen und ihre Verwendung. Verifizierung und Signierung sind sehr wichtige Sicherheitskonzepte in der Informatik. Sie dienen häufig dazu, sicherzustellen, dass die übermittelten Daten vollständig und authentisch sind. Verifizierung und Signaturen werden beim Umgang mit Online-Transaktionen und sensiblen Informationen noch wichtiger, denn wenn jemand in der Lage ist, die Daten zu manipulieren, könnte dies möglicherweise der Fall sein

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

Wie kann das Problem gelöst werden, dass die Steam-Anmeldung bei der Überprüfung des mobilen Tokens hängen bleibt? Wie kann das Problem gelöst werden, dass die Steam-Anmeldung bei der Überprüfung des mobilen Tokens hängen bleibt? Mar 14, 2024 pm 07:35 PM

Steam ist eine Plattform, die von Spielebegeisterten verwendet wird. In letzter Zeit sind jedoch viele Benutzer bei der Anmeldung bei Steam in der Benutzeroberfläche für mobile Token steckengeblieben und können sich nicht erfolgreich anmelden Wissen Sie, wie Sie diese Situation lösen können. Das heutige Software-Tutorial ist hier, um die Fragen zu beantworten, damit Benutzer in Not die Bedienungsmethoden ausprobieren können. Fehler beim mobilen Steam-Token? Lösung 1: Suchen Sie bei Softwareproblemen zunächst die Steam-Softwareeinstellungen auf dem Mobiltelefon, fordern Sie Hilfe an und bestätigen Sie, dass das Netzwerk, das das Gerät verwendet, normal funktioniert. Klicken Sie erneut auf OK, klicken Sie auf SMS senden. Sie können den Bestätigungscode auf der erhalten Handy-Seite, und Sie sind fertig, wenn Sie eine Anfrage bearbeiten

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

Tipps zur Verwendung von Laravel-Formularklassen: Möglichkeiten zur Verbesserung der Effizienz Tipps zur Verwendung von Laravel-Formularklassen: Möglichkeiten zur Verbesserung der Effizienz Mar 11, 2024 pm 12:51 PM

Formulare sind ein wesentlicher Bestandteil beim Schreiben einer Website oder Bewerbung. Laravel bietet als beliebtes PHP-Framework umfangreiche und leistungsstarke Formularklassen, die die Formularverarbeitung einfacher und effizienter machen. In diesem Artikel werden einige Tipps zur Verwendung von Laravel-Formularklassen vorgestellt, die Ihnen dabei helfen, die Entwicklungseffizienz zu verbessern. Im Folgenden wird anhand spezifischer Codebeispiele ausführlich erläutert. Erstellen eines Formulars Um ein Formular in Laravel zu erstellen, müssen Sie zunächst das entsprechende HTML-Formular in die Ansicht schreiben. Wenn Sie mit Formularen arbeiten, können Sie Laravel verwenden

PHP berechnet den MD5-Hashwert der Zeichenfolge PHP berechnet den MD5-Hashwert der Zeichenfolge Mar 21, 2024 am 10:51 AM

In diesem Artikel wird ausführlich erläutert, wie PHP den MD5-Hashwert einer Zeichenfolge berechnet. Der Herausgeber hält dies für recht praktisch, daher teile ich es Ihnen als Referenz mit. Ich hoffe, dass Sie nach dem Lesen dieses Artikels etwas gewinnen können. Berechnen des MD5-Hash-Werts einer Zeichenfolge in PHP Einführung MD5 (Message Digest 5) ist eine beliebte kryptografische Hash-Funktion, die zum Generieren von Hash-Werten fester Länge verwendet wird und häufig zum Schutz der Datenintegrität, zur Überprüfung der Dateiintegrität und zum Erstellen einer digitalen Signatur verwendet wird. Dieser Artikel führt PHP-Entwickler durch die Verwendung integrierter Funktionen zur Berechnung des MD5-Hashwerts einer Zeichenfolge. md5()-Funktion PHP stellt die md5()-Funktion zur Verfügung, um den MD5-Hash-Wert eines Strings zu berechnen. Diese Funktion empfängt einen String-Parameter und gibt einen 32 Zeichen langen hexadezimalen Hash-Wert zurück.

See all articles