Heim > Web-Frontend > js-Tutorial > Beispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion

Beispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion

小云云
Freigeben: 2017-12-31 16:50:25
Original
1291 Leute haben es durchsucht

In diesem Artikel wird jedem die Funktion zur Überprüfung des jQuery-Validierungsformats vorgestellt. Der Code enthält die Methode zur Überprüfung doppelter Namen. Ich hoffe, dass er allen helfen kann.

Führen Sie zwei js-Dateien ein: jQuery-1.7.1.js und jquery.validate.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"

<head> 

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  <title></title> 

  <script src="Scripts/jquery-1.7.1.js"></script> 

  <script src="Scripts/jquery.validate.js"></script> 

  <script> 

    $().ready(function () { 

      ///自定义ajax验证 

      jQuery.validator.addMethod("ExistsCompany", function (value, element) {  //用jquery ajax的方法验证电话是不是已存在  

        var flag = 1; 

        $.ajax({ 

          type: "POST"

          url: &#39;/CustomerMonkey/ExistsCompanyAction&#39;, 

          async: false

          data: { 

            &#39;name&#39;: value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () { 

              return $("#hidCustomerID").val(); 

            

          }, 

          success: function (data) { 

            if (data.result == "TRUE") { 

              flag = 0; 

            

            else if (data.result == "NO") { 

              compaymsg = "Name does not exist"

            

          

        }); 

        if (flag == 0) { 

          return true

        } else

          return false

        

      }, compaymsg); 

      $("#form1").validate({ 

        rules: { 

          txtUserName: 

          

            required: true

            minlength: 6, 

            rangelength: [6, 20],      //长度5-10之间 

            remote: { 

              url: "/admin/CheckName"//后台处理程序 

              type: "post",        //数据发送方式 

              dataType: "json",      //接受数据格式 

              data: {           //要传递的数据 

                name: function () { 

                  return $("#txtUserName").val(); 

                

              

            }, 

            ExistsCompany: true

          }, 

          txtPassword: { 

            required: true

            minlength: 6, 

            rangelength: [6, 20],  //长度5-10之间 

            password: true

          }, 

          txtPwd: { 

            required: true

            equalTo: "#txtPassword"

            minlength: 6, 

            rangelength: [5, 20],  //长度5-10之间 

            password: true

          }, 

          txtDisplayName: { 

            required: true

            minlength: 6, 

            rangelength: [6, 20],  //长度5-10之间 

          }, 

          txtAge: { 

            required: true

            digits: true

            min: 1, 

            max: 100 

          }, 

          sex: { 

            required: true

          }, 

          txtCard: { 

            required: true

            creditcard: true

          }, 

          txtidcard: { 

            required: true

            idcard: true

          }, 

          txtEmail: { 

            required: true

            email: true

          }, 

          txtTel: { 

            required: true

            phone: true

          }, 

          txtQQ: { 

            required: true

            qq: true

          }, 

          txtUrl: { 

            required: true

            url: true

          }, 

          txtZipCode: { 

            required: true

            zipcode: true 

          }, 

          txtDate: { 

            required: true

            date: true

          }, 

          txtISO: { 

            required: true

            dateISO: true

          }, 

          filFile: { 

            required: true

            filetype: ["mp3", "wma", "wav"

          

        }, 

        messages: { 

          txtUserName: { 

            required: "请输入登录名"

            minlength: jQuery.format("登录名不能小于{0}个字符"), 

            rangelength: "长度必须介于{0} 和 {1} 之间的字符串"

            remote: "登录名已存在"

          }, 

          txtPassword: { 

            required: "请输入密码"

            minlength: jQuery.format("密码不能小于{0}个字符"), 

            rangelength: "长度必须介于{0} 和 {1} 之间的字符串"

            password: "密码只能是数字、字母与下划线" 

          }, 

          txtPwd: { 

            required: "请输入确认密码"

            minlength: "确认密码不能小于5个字符"

            rangelength: "长度必须介于{0} 和 {1} 之间的字符串"

            equalTo: "两次输入密码不一致不一致"

            password: "密码只能是数字、字母与下划线" 

          }, 

          txtDisplayName: { 

            required: "请输入用户名"

            minlength: jQuery.format("密码不能小于{0}个字符"), 

            rangelength: "长度必须介于{0} 和 {1} 之间的字符串"

          }, 

          txtAge: { 

            required: "请输入年龄"

            digits: "只能输入数字"

            min: "最小值是1"

            max: "最大值是100" 

          }, 

          sex: { 

            required: "请选择性别"

          }, 

          txtCard: { 

            required: "请输入信用卡"

            creditcard: "请输入信用卡"

          }, 

          txtidcard: { 

            required: "请输入身份证号"

            idcard: "身份证号格式不正确"

          }, 

          txtEmail: { 

            required: "请输入邮箱"

            email: "邮箱格式不正确"

          }, 

          txtTel: { 

            required: "请输入手机"

            phone: "手机格式不正确" 

          }, 

          txtQQ: { 

            required: "请输入QQ"

            qq: "qq格式不正确"

          }, 

          txtUrl: { 

            required: "请输入网址"

            url: "请输入正确的网址"

          }, 

          txtZipCode: { 

            required: "请输入邮编"

            zipcode: "邮编格式不正确" 

          }, 

          txtDate: { 

            required: "请输入时间"

            date: "日期格式不正确"

          }, 

          txtISO: { 

            required: "请输入ISO"

            dateISO: "ISO格式错误" 

          }, 

          filFile: { 

            required: "请选择文件"

            filetype: "只能上传MP3,WMA,WAV格式文件"

          

        }, 

        submitHandler: function (form) { 

          //避免重复提交数据 

          $(form).find(":submit").attr("disabled", true); 

          form.submit(); 

        }, 

        //指定错误信息位置 

        errorPlacement: function (error, element) { 

          if (element.is(&#39;:radio&#39;) || element.is(&#39;:checkbox&#39;)) { //如果是radio或checkbox 

            var eid = element.attr(&#39;name&#39;);           //获取元素的name属性 

            error.appendTo(element.parent());          //将错误信息添加当前元素的父结点后面 

          } else

            error.insertAfter(element); 

          

        }, 

      }); 

    }); 

  </script> 

</head> 

<body> 

  <form id="form1" runat="server"

    <p> 

      <p> 

        <label>登录名:</label> 

        <input id="txtUserName" name="txtUserName" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>密码:</label> 

        <input id="txtPassword" name="txtPassword" class="sf" type="password" value="" /> 

      </p> 

      <p> 

        <label>确认密码:</label> 

        <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" /> 

      </p> 

      <p> 

        <label>用户名:</label> 

        <input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" /> 

      </p> 

      <p> 

        <label>年龄:</label> 

        <input id="txtAge" name="txtAge" class="mf" type="text" value="" /> 

      </p> 

      <p> 

        <label>性别:</label> 

        <input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女 

      </p> 

      <p> 

        <label>信用卡:</label> 

        <input id="txtCard" name="txtCard" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>身份证:</label> 

        <input id="txtidcard" name="txtidcard" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>邮箱:</label> 

        <input id="txtEmail" name="txtEmail" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>手机:</label> 

        <input id="txtTel" name="txtTel" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>QQ:</label> 

        <input id="txtQQ" name="txtQQ" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>网址:</label> 

        <input id="txtUrl" name="txtUrl" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>邮编:</label> 

        <input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>时间:</label> 

        <input id="txtDate" name="txtDate" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>ISO:</label> 

        <input id="txtISO" name="txtISO" class="sf" type="text" value="" /> 

      </p> 

      <p> 

        <label>文件:</label> 

        <input id="filFile" name="filFile" type="file" /> 

      </p> 

    </p> 

    <input id="Submit1" type="submit" value="submit" /> 

  </form> 

</body> 

</html> 

  

password: function (value, element) { 

      return this.optional(element) || /^\w+$/.test(value); 

    }, 

    address: function (value, element) { 

      return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value); 

    }, 

    ///固定电话123-85611111 或 0311-8561111 

    phone: function (value, element) { 

      return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value); 

    }, 

    ///13866666666 

    telphone: function (value, element) { 

      return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value) 

    }, 

    mobilephone: function (value, element) { 

      return this.optional(element) || /^\d{3}-\d{8}$|\d3\d{8}$|\d{4}-\d{7}$|\d4\d{7}$|1[358]\d{9}$/.test(value); 

    }, 

    //身份证号 

    idcard: function (value, element) { 

      return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value); 

    }, 

    ///上传文件格式验证 

    filetype: function (value, element, param) { 

      var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase(); 

      return this.optional(element) || $.inArray(fileType, param) != -1; 

    },

Nach dem Login kopieren

Verwandte Empfehlungen:

Lösen Sie jquery. validieren.js Validierungsverarbeitung für mehrere Namen mit demselben Namen

JQuery Validate Schritt-für-Schritt-Praxisanleitung

Empfohlene Kurse zur Validate-Verifizierung

Das obige ist der detaillierte Inhalt vonBeispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage