jQuery EasyUI Bentuk - Validasi Form
Tutorial ini akan menunjukkan cara untuk memvalidasi formulir. Kerangka validatebox easyui menyediakan plug-in untuk memvalidasi formulir. Dalam tutorial ini, kita akan membuat formulir kontak, dan menerapkan validatebox plug-in untuk memverifikasi formulir. Anda kemudian dapat menyesuaikan sesuai dengan kebutuhan mereka sendiri untuk formulir.
Buat bentuk (form)
Mari kita membuat formulir kontak sederhana dengan bidang nama, email, subjek dan pesan:
<Div style = "padding: 3px 2px; border-bottom: # ccc padat 1px"> Form Validasi </ div> <Form id = "ff" method = "post"> <Div> <Label untuk = "nama"> Nama: </ label> <Input class = "easyui-validatebox" type = "text" name = "nama" diperlukan = "true"> </ input> </ Div> <Div> <Label untuk = "email"> Email: </ label> <Input class = "easyui-validatebox" type = "text" name = "email" yang diperlukan = "true" VALIDTYPE = "email"> </ input> </ Div> <Div> <Label untuk = "subjek"> Subject: </ label> <Input class = "easyui-validatebox" type = "text" name = "subjek" diperlukan = "true"> </ input> </ Div> <Div> <Label untuk = "pesan"> Pesan: </ label> & Lt; textarea name = "pesan" style = "height: 60px;" & gt; & lt; / textarea & gt; </ Div> <Div> <Input type = "submit" value = "Submit"> </ Div> </ Form>
Kami menambahkan gaya yang disebut easyui-validatebox untuk tag input, sehingga input tanda verifikasi akan diterapkan sesuai dengan properti VALIDTYPE.
Mencegah pengiriman formulir ketika bentuk tidak valid
Ketika pengguna mengklik tombol form submit, jika bentuk tidak valid, kita harus berhenti pengiriman formulir.
$ ( '# Ff'). Form ({ url: 'form3_proc.php', onSubmit: function () { kembali $ (ini) .form ( 'validasi'); }, Keberhasilan: function (data) { $ .messager.alert ( 'Info', data, info '); } });
Jika formulir tidak valid, pesan akan ditampilkan.